Strukturelle Pseudoklassen
Teil des Abschnitts CSS Mastery 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 Ihnen, Elemente wie das erste Kindelement, das letzte Kindelement oder bestimmte nummerierte Kindelemente auszuwählen, ohne zusätzliche Klassen oder IDs zu benötigen.
Häufige Beispiele sind:
:first-child— wählt das erste Kindelement eines Elternelements aus.
:last-child— wählt das letzte Kind eines Elternelements aus.:nth-child(n)— wählt das n-te Kind aus (z. B. jedes 2., 3. usw.).
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Spickzettel
Strukturelle Pseudoklassen formatieren Elemente basierend auf ihrer Position innerhalb des HTML-Dokuments:
:first-child— wählt das erste Kindelement eines Elternelements aus:last-child— wählt das letzte Kindelement eines Elternelements aus:nth-child(n)— wählt das n-te Kindelement 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 Mastery
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