Oft ist es nötig, bestimmte Elemente eines Eltern-Elements (z.B. einer unordered List ul oder eines Div-Elements) eine spezielle CSS-Eigenschaft zu geben. Zum Beispiel kann man so überflüssige Margin-Werte eines letzten Listenelements auf Null setzen, oder jedes zweite Element einer Liste zur besseren Übersicht mit einer anderen Farbe markieren. Um für diese Aufgabe keine extra CSS-Klassen vergeben zu müssen, kannst du stattdessen die praktischen CSS Pseudoklassen-Selektoren :first-child, :last-child und :nth-child nutzen.

1. :first-child

Mit Hilfe des Pseudo-Selektors :first-child kannst du das erste Element eines Eltern-Elements ansprechen. Zum Beispiel kannst du so das erste Listen-Element (li) in einer unordered List (ul) mit :first-child ansprechen.

Beispiel für die Verwendung von :first-child

Angenommen die Listen-Elemente einer Auflistung der neusten Blog-Artikel in deiner Sidebar haben alle folgende border-top CSS-Eigenschaft:

[php]
ul#recent-posts li {
border-top: 1px solid #333;
}
[/php]

Um dem ersten Listen-Element der Auflistung keine border-top zu geben, kannst du jetzt den :first-child Selektor nutzen und so die border-top Eigenschaft auf none setzen.

[php]
ul#recent-posts li:first-child {
border-top: none;
}
[/php]

CSS Pseudoklassen-Selektoren
Das erste Element wird ohne border-top angezeigt.

2. :last-child

Genauso wie der :first-child Selektor das erste Element innerhalb eines Eltern-Elements anspricht, kannst du mit dem CSS Pseudo-Selektor :last-child das letzte Element eines Eltern-Divs oder eines Listenelements (ul oder ol) speziell ansprechen.

Beispiel für die Verwendung von : last-child

Um dem untersten Listenelement keine untere Border mehr zu geben, kannst du die CSS-Eigenschaft border-bottom mit Hilfe des :last-child Selektors auf none setzen.

[php]
ul#recent-posts li:last-child {
border-bottom: none;
}
[/php]

CSS Pseudoklassen-Selektoren
Das letzte Element wird ohne border-bottom angezeigt.

3. :nth-child

Im ersten Moment etwas komplizierter zu verstehen als :first- und :last-child, ist der CSS3 Pseudoklassen-Selektor :nth-child. Dafür ist die Funktion im Einsatz aber auch um so praktischer.

Mit :nth-child kannst du ebenfalls bestimmte Elemente innerhalb eines Eltern-Elements ansprechen. :nth-child gibt dir aber die Möglichkeit, die Elemente nach einem bestimmten Argument aufzurufen. Zum Beispiel kannst du mit den Argumenten odd (für alle ungeraden Zahlen) und even (für alle geraden Zahlen) allen geraden oder allen ungeraden Listen-Elementen eine spezielle CSS-Eigenschaft geben.

Beispiel für die Verwendung von :nth-child mit odd und even

In einer Tabelle kannst du so jede zweiter Reihe mit einer anderen Hintergrundfarbe belegen:

[php]
tr:nth-child(odd) td {
background: #C1B49A;
}
[/php]

CSS Pseudoklassen-Selektoren
Alle Listen-Elemente mit ungeraden Zahlen haben einen farbigen Hintergrund.

Auch bei einer Reihe von gefloateten Elementen (z.B. einer Vorschau von Flickr-Bildern) kann der CSS Pseudoklassen-Selektor :nth-child sehr hilfreich sein. Denn außer den Argumenten odd und even kannst du auch noch Zahlen verwenden.

Beispiel für die Verwendung von :nth-child mit Zahlen-Werten

Möchtest du z.B. eine Flickrfoto-Vorschau in deiner Sidebar anzeigen, kannst du jedem Vorschaubild einen Margin-Wert von margin-right: 10px geben. Bei einer dreispaltigen Ansicht kannst du jetzt bei jedem dritten Bild den margin-right Wert auf 0px setzten, indem du den Wert 3n (für jedes dritte Element) nutzt.

[php]
.flickr_badge_wrapper:nth-child (3n) {
margin-right: 0px;
}
[/php]

So vermeidest du, dass die Gesamtbreite der Flickr-Vorschau zu groß für die Breite deiner Sidebar wird und das dritte Vorschaubild in eine neue Zeile verrutscht.

CSS Pseudoklassen-Selektoren
Jedes dritte Flickrbild hat den Margin-Wert margin-right: 0px; und passt so in die Sidebar-Breite.

Und der Pseudoklassen-Selektor kann sogar noch mehr. Um nicht nur jedes dritte Element innerhalb eines Eltern-Elements anzusprechen, sondern das erste Element und dann, vom ersten Element ausgehend, jedes dritte Element kannst du das Argument :nth-child (3n+1) nutzen.

Um erst dem zweiten Child-Element, und dann vom zweitem Element ausgehend jedem viertem Element einen speziellen CSS-Style zu geben, nutzt du dann also :nth-child (4n+2) usw.

Um dir das Prinzip zu verinnerlichen, gibt es bei CSS-Tricks einen tollen :nth-child Tester.

CSS Pseudoklassen-Selektoren
Mit diesem praktischen :nth-child Tester kannst du dein benötigtes nth-child Argument testen.

Eine Tabelle zur Veranschaulichung der Berechnung von nth:child Argumenten kannst du dir außerdem im Blog-Artikel “Understanding :nth-child Pseudo-class Expressions” anschauen.

4. Browser-Unterstützung

Wie du siehst lässt sich mit den prakischen CSS Pseudoklassen-Selektoren so einiges anstellen. Leider ist der Internet Explorer mal wieder eine Ausnahme, da er den :nth-child Selektor erst ab der Version 9beta unterstützt. Wenn du auf deiner Webseite bereits jQuery nutzt, kannst du die Selektoren mit Hilfe des JavaScript-Scripts Selectivizr dennoch verwenden. Das Script bietet eine Fallback-Lösung für CSS3 Pseudoklassen-Selektoren und Attribute in den Internet Explorer Versionen 6-8.

Du kannst dir das Script auf der Webseite von Selectivizr downloaden, dann lädst du es auf deinen eigenen Serverspace hoch, und rufst es mit folgendem Code innerhalb deines Head-tags auf:

[php]
<script type="text/javascript" src="[JS library]"></script>
<!–[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]–>
[/php]

(Beim Einfügen des Codes musst du nur noch darauf achten, dass du auf den richtigen Pfad für das Script verweist.)

Noch mehr Lesestoff zum Thema CSS Pseudoklassen-Selektoren

Natürlich gibt es neben :first-child, :last-child und :nth-child auch noch weitere praktische CSS Pseudoklassen-Selektoren. In den folgenden Artikel findest du jede Menge hilfreiche Infos und Tipps zur Nutzung.

Hast du Fragen zur Verwendung der Pseudoklassen-Selektoren, oder kennst du weitere praktische Tipps oder Tutorials zum Thema CSS Pseudoklassen-Selektoren? Über dein Feedback und deine Tipps freue ich mich sehr!