Das Xte Element mit CSS3 und nth-child gestalten

CSS3 ist schon ein faszinierend Ding. Sachen welche man zuvor nur mittels Scriptspracheneinsatz hatte lösen können, nutzt man mit CSS3 nativ. Zumindest in soweit die unterschiedlichen Browser dies zulassen. So ist es auch nicht verwunderlich, dass wir mit Hilfe des Pseudo-Selektors „nth-child“, Dinge dynamisch gestalten können.

Was ist dieses nth-child?

Im Grunde das, was der Name vermuten lässt. Es lässt uns mittels CSS3 auf das n-sten Element im DOM zugreifen und dieses entsprechend gestalten. Klingt einfach? Naja, ganz so trivial wie es auf den ersten Blick scheint ist es manchmal dann doch nicht. Denn dieser Selektor bietet einige raffinierte Möglichkeiten des Zugriffs die es als Werkzeug sehr mächtig machen. Aber verzweifeln muss man daran nicht -hat man das Prinzip einmal verstanden. So kann man das Prinzip nutzen um zum Beispiel folgendes Menü dynamisch zu gestalten.

Das Xte Element mit CSS3 und nth-child gestalten in drei Farben

Fügt man diesem nun einen weiteren Menüpunkt hinzu. Wird ihm ohne weiteres Zutun die richtige Farbe zugewiesen.

Viele Wege führen nach Rom (und zum n-sten Kind)

Der einfachste Weg den Selektor „nth-child“ zu verwenden besteht in der Zuweisung eines Zahlenwerts.

ul li:nth-child(5){color:red;}

Mit der oben gezeigten Anweisung, weisen wir der Schrift im 5. <li> Element innerhalb des <ul> Elements die Farbe „red“ zu.

Sicherlich gibt es hierfür mannigfaltige Anwendungmöglichkeiten. So richtig interessant wird es aber erst, wenn wir zum Beispiel Zuweisungen im Wechsel vornehmen wollen. Denken Sie einmal an eine Tabelle in welcher Sie jeder zweiten Zeile eine andere Hintergrundfarbe zuweisen wollen. Ein häufig aufkommendes Problem im Webdesign. Diesen einfachen Fall würden sie so lösen:

table tr:nth-child(even){background-color: grey;}

Dieser Code weist allen geraden (even) Tabellenzeilen die Hintergrundfarbe Grau zu und lässt die ungeraden unberührt. Aber auch diese kann man natürlich zusätzlich gestalten wenn man dies möchte:

table tr:nth-child(odd){background-color:green;}

Hier weisen wir allen ungeraden (odd) Tabellenzeilen ein grüne Hintergrundfarbe zu.

Im obigen Menü-Beispiel hatten wir jedoch eine andere Situation. Zum Einen haben wir es dort mit drei unterschiedlichen Farben zu tun, was die Nutzung von „even“ und „odd“ sowie die Selektion mittels eines einfachen Zahlenwerts ausschließt. Zum Anderen wiederholten sich die drei Farben im Wechsel blockweise. Es muss also noch eine andere, komplexere und mächtigere Möglichkeit der Selektion geben. Hierzu einmal der CSS-Code zum obigen Beispiel:

#main-nav ul li:nth-child(3n+1) a {background-color: #0e68ad;}
#main-nav ul li:nth-child(3n+2) a {background-color: #418ec9;}
#main-nav ul li:nth-child(3n+3) a {background-color: #89bfe8;}

Genau… nicht ganz so trivial. Ich hatte Sie ja gewarnt. Konzentrieren wir uns einmal auf den ersten Pseudoselektor: „nth-child(3n+1)“. Im Grunde ist es simple Algebra. Das „n“ steht stellvertretend für alle <li> Elemente im DOM. Denken Sie dabei an eine Art Array in PHP, welches alle <li> Elemente beherbergt. Wir haben in „n“ also quasi die Referenz auf die einzelnen <li> Elemente, wobei der Zähler wie auch in PHP-Arrays mit 0 beginnt. Die 3 steht für den Multiplikator und kann beliebig angepasst werden. Man könnte auch schreiben 3*n (drei mal n). CSS3 iteriert sozusagen über „n“ und nimmt dabei die entsprechenden Berechnungen vor.

• 3*0 = 0
• 3*1 = 3
• 3*2 = 6
• 3*3 = 9

usw.

Dann addieren wir einfach jeweils 1 hinzu:

• 3*0+1 = 1
• 3*1+1 = 4
• 3*2+1 = 7
• 3*3+1 = 10

usw.

Wir selektieren also jeweils das Element an den Positionen 1,4,7,10 und so weiter. Genau das Gleiche geschieht nun bei der Gleichung „3n+2“. Wir Selektieren also die Positionen 2,5,8,11 und so weiter. Wenn man nun möchte, kann man die Addition einfach entfallen lassen und nur „3n“ nutzen. Dies würde dann die Elemente der Positionen 3,6,9,12 usw. Selektieren. Also jedes 3. Element.

Die negative Seite

Anstelle der Addition können wir auch eine Subtraktion verwenden. Als Beispiel „3n-1“.

• 3*0-1 = -1
• 3*1-1 = 2
• 3*2-1 = 5
• 3*3-1 = 8

usw.

Die erste Rechnung wird keine Übereinstimmung im Dokument finden, da es kein negativ positioniertes Element geben kann. Unsere Zahlenreihe (n) beginnt stets mit 0.

Wir können aber auch mit einem negativen n-Selektor arbeiten. Zum Beispiel würde „-n+3“ funktionieren.

• -0+3 = 3
• -1+3 = 2
• -2+3 = 1
• -3+3 = 0

usw.
Wir könnten so die Selektion einfach in Absteigender Reihenfolge vornehmen. Wobei auch hier wieder an einem Bestimmten Punkt das Ende erreicht ist. Denn spätestens ab „-4+3“ sind wir wieder im negativen, und somit unzuweisbaren Bereich.

Wie immer, der Internet Explorer

Wenn wir nun zu dem oft leidigen Thema der Browserkompatibilität kommen, ist man schon fast den Tränen nahe. Alle gängigen Browser unterstützen die Pseudoselektion. Die all gegenwärtige Ausnahme ist hier wieder der Internet Explorer und zwar inklusive der Version 8. Ab der Version 9 wird nth-child jedoch auch vom Internet Explorer unterstützt, wie man an folgender Tabelle sehen kann.

http://caniuse.com/#search=nth-child Übersichtstabelle für nth-child

Somit kann ich Ihnen an dieser Stelle nur raten, dass Sie diese Methode nur bei nicht Struktur- und Layoutrelevanten Gestaltungen einsetzen. Etwa, wie oben erwähnt, zum Gestalten von Hintergrundfarben bei Tabellen oder Menüs. Abzuraten ist allerdings vom Einsatz der Methodik, wenn es um Dinge wie Positionierung von Elementen geht. Durch die fehlende IE Unterstützung kann dies schnell ins Auge gehen insofern man nicht jQuery zum Einsatz bringt. Dieses Framework unterstützt auch den IE und man könnte es als Fallback in Zusammenarbeit mit nth-child verwenden.

Wer das Ganze nun auch in bewegten Bildern sehen möchte, kann dies hier tun.