Der nth-child() Pseudoselektor - Selten genutztes CSS #2

Im zweiten Teil meiner kleinen Serie "Selten genutztes CSS" geht es um den nth-child() (Pseudo-) Selektor. Ein Selektor den ich zwar häufig genutzt, aber wenn ich ehrlich bin eigentlich nie grundlegend verstanden habe. Bis jetzt zumindest...

Und was zum Teufel ist nun ein nth-child?

Wie der Ausdruck "child" schon andeutet geht es hierbei um die Auswahl bestimmter "Kinder" eines Elternelements, um diese per CSS zu stylen. Genauer gesagt um das "n-te" Kind. Im selfhtml.wiki wird es korrekter so ausgedrückt:

Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.

Klingt kompliziert, daher hier einige...

Praktische Beispiele

Fangen wir mal ganz einfach an:

ul.menu li:nth-child(3n) {
color: red; }

Damit wird der Text jedes dritten Listen- Elements (li) der ungeordneten Liste (ul) mit der Klasse "menu" rot gefärbt. Also die Elemente Nr.3, Element Nr.6, Nr.9 etc. Das sieht dann so aus:

Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
etc.

Das "n" gibt also den Multiplikator an, mit dem Elemente ausgewählt werden. Einfacher gesagt: :nth-child(3n) wird mit "wähle jedes dritte Element aus" übersetzt.

Kleiner Hinweis: Läßt man das "n" weg wird nicht jedes dritte Element ausgewählt, sondern nur das dritte, aber kein weiteres mehr. Mit:

ul.menu li:nth-child(3) {
color: red; }

würde das Ergebnis dann so aussehen:

Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
etc.

Aber weiter im Text: Man kann nicht nur den Multiplikator definieren der für die Auswahl des jeweiligen Elements verantwortlich ist, man kann zusätzlich noch ein "offset" angeben. Will man beispielsweise das zwar jedes dritte Element gesondert ausgezeichnet will, will aber mit dem ersten Element in der Liste beginnen sieht der CSS Code wie folgt aus:

ul.menu li:nth-child(3n+1) {
color: red; }

Generell wird mit dem zählen bei "0" begonnen. Die "+1" setzt den Beginn der ganzen Zählerei aber auf 1 fest. Damit ist dann Element Nr.1, Element Nr.4, Element Nr.7 etc. ausgewählt. Das Ergebnis sieht dann so aus:

Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
Listenelement
etc.

Im oben genannten Beispiel wäre die Übersetzung also "wähle jedes dritte Element aus, beginnend mit dem ersten".

Anstelle von +1 kann jede beliebige Zahl angegeben werden. Wird ein Minuszeichen vorangestellt kann auch von einer negativen Zahl aus begonnen werden.

Wer jetzt noch mehr verwirrt ist als am Anfang sollte den nth Child Tester von css-tricks.com nutzen. Mit ein paar Klicks erklärt sich hier das Prinzip von selber.

Zum Schluß noch ein paar Worte zur Browserkompatibilität: Es machen mal wieder alle mit, bis auf den IE8 und älter.