Beantworten Sie die folgenden Fragen zu CSS-Pseudo-Klassen:
nth-child(n)
und nth-of-type(n)
.Was | Beschreibung |
---|---|
Produkt | Notiz mit Ihren Antworten |
Zeit | 5 Min. |
Sozialform | Einzel- oder Partnerarbeit |
Erstellen Sie eine Datei index.html
mit folgendem Inhalt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo-Klassen Übung</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Pseudo-Klassen in Aktion</h1> <button>Klick mich</button> <input type="text" placeholder="Fokus mich"> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ul> </body> </html>
styles.css
und verknüpfe sie die CSS-Datei mit der HTML-Datei.<button>
-Element verändert, wenn die Maus darüberfährt (hover
).button:active
, sodass sich das Aussehen ändert, wenn der Button geklickt wird.<input>
-Feld so, dass sich die Rahmenfarbe ändert, wenn es fokussiert wird (focus
).<li>
fett macht und den letzten <li>
grau färbt.nth-child(n)
, um das zweite <li>
-Element in einer anderen Farbe darzustellen.<h1>
-Element eine andere Farbe bekommt, wenn man mit der Maus darüberfährt.Was | Beschreibung |
---|---|
Produkt | HTML- und CSS-Datei |
Zeit | 15 Min. |
Sozialform | Einzel- oder Partnerarbeit |