Strukturelle Pseudoklassen
Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 12 von 43.
Strukturelle Pseudoklassen in CSS werden verwendet, um Elemente basierend auf ihrer Position oder Struktur innerhalb des HTML-Dokuments zu gestalten. Sie ermöglichen es dir, Elemente wie das erste oder letzte untergeordnete Element sowie bestimmte nummerierte untergeordnete Elemente auszuwählen, ohne zusätzliche Klassen oder IDs zu benötigen.
Häufige Beispiele sind:
:first-child: wählt das erste Kind eines übergeordneten Elements aus.
:last-child: wählt das letzte untergeordnete Element eines übergeordneten Elements aus.:nth-child(n): wählt das n-te untergeordnete Element aus (z. B. jedes 2., 3. usw.).
Probier es selbst
Diese Lektion enthält keine Programmieraufgabe.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in CSS-Meisterschaft
1Selektoren-Meisterschaft – Kombinationen
EinführungNachfahren-SelektorKind-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-SelektorWiederholungs-Challenge4Projekt: Dropdown-Menü
Das Untermenü hinzufügenDas Untermenü anzeigenWeiteres StylingInput und Button7Erstellen mit CSS Grid
Grid-GrundlagenGrid-row ElementplatzierungBenannte BereicheWiederholungs-Challenge2Interaktive Pseudoklassen
PseudoklassenHover-EffekteFokus-EffekteAktiv-StylesWiederholungs-Challenge3Strukturelle Pseudoklassen
Strukturelle PseudoklassenDas erste Kind-Element ansprechenDas letzte Kind-Element ansprechenMuster-Power: nth-child nutzenWiederholungs-Challenge6Landing Page
Header-Bereich stylenDen Button stylenSektions-LayoutCard-LayoutDen letzten Schliff hinzufügen9Abschluss-Herausforderungen
Aktives Menü hervorhebenZebra-TabellenzeilenButton-Hover-EffektGrid-Card-LayoutVerschwommenes Hero-ImageÜbe selbstständig: Web-Playground