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.