CSS 3 Selektor nth-child

CSS 3 bietet viele wunderbare Möglichkeiten, um Webseiten zu verschönern und übermässigen Gebrauch von Grafiken – zu Optimierungszwecken – zu verhindern.

Wunderbare Welt der Schwerkraft
~ Monty Python

In CSS gibt es einige Selektoren, die praktisch und sinnvoll bei der Arbeit unterstützen. Hier möchte ich über den nth-child Selektor berichten und ein Praxisbeispiel zeigen.

Anforderung

Eine Navigation mit 7 Punkten soll 3 verschiedenfarbige Linien unterhalb des Textes haben:

Die ersten 3 Punkte grün
nächsten 2 blau
die beiden Letzten rot

Lösung

Hier bietet sich die Verwendung des nth-child an. Ein ansprechen des Selektors funktioniert ganz einfach:

Elternelement:nth-child(Wiederholung) { Style }

Im konkretem Beispiel wird eine unsortiere Liste (<ul>) für die Navigation verwendet. Um nun also die Farben zu bestimmen, setzen wir die Listenelemente (<li>) auf eine Standardfarbe (Grün):

ul > li {border-bottom: 1px solid green;}

Mittels des Selektors können wir nun folgenden „Trick“ verwenden: Jeder 4. und 5. Navigationspunkt soll nun Blau werden.

ul > li:nth-child(4n) {border-bottom: 1px solid blue;}
ul > li:nth-child(5n) {border-bottom: 1px solid blue;}

Das Gleiche können wir für die Farbe Rot anwenden:

ul > li:nth-child(6n) {border-bottom: 1px solid red;}
ul > li:nth-child(7n) {border-bottom: 1px solid red;}

Schon ist die Aufgabe erledigt.

Wichtig

Um die Funktionsweise zu gewährleisten, muss natürlich hierarchisch vorgegangen werden. CSS wird von oben nach unten abgearbeitet. Nachfolgende Anweisungen überschreiben also vorherige. Bedeutet: Wenn z.B. die Anweisung nth-child(4n) erst nach nth-child(6n) ins CSS eingefügt wird, dass jeder 4. Eintrag also blau ist.
Das gilt auch, wenn mehr als 7 Navigationspunkte eingefügt werden:

der 8. wäre blau (4n)
der 9. grün
der 10. blau (5n)
der 11. grün
der 12 blau (4n) usw.

Hier kann die Navigation angesehen werden: http://www.probisa.de

Insgesamt wurde hier noch mit Mousover und markierten Navigationselementen gearbeitet.