Element-Styling mit der CSS-Pseudoklasse :nth-child

In CSS3 wurden neue Pseudoklassen eingeführt mit denen Ihr bestimmte Elemente ansprechen könnt. Eine davon ist :nth-child mit der sich Kind-Elemente nach einer vorgegebenen Berechnung auswählen und ansprechen lassen. So könnt Ihr beispielsweise alle ungeraden Tabellenzeilen stylen.
Allerdings führt insbesondere diese Pseudoklasse zu einiger Verwirrung da der Syntax auf den ersten Blick nicht ganz eindeutig erscheint. Ich möchte Euch erklären wie die CSS3-Eigenschaft funktioniert.

Standard-Syntax mit Keywords

Ich möchte gerne am Beispiel einer Tabelle zeigen wie der CSS3-Syntax aufgebaut ist. Ich habe dazu eine Tabelle mit 15 Zeilen erstellt die ich nun mittels CSS3 :nth-child gestalten werde.

tr:nth-child(odd) {
  background:silver;
}

Ich spreche in diesem Beispiel zunächst alle Tabellenzeilen <tr> an und schränke die Auswahl anschließend mit der Pseudoklasse :nth-child() wieder ein. In diesem Fall habe ich das Keyword odd verwendet. Hiermit werden alle ungeraden Tabellenzeilen ausgewählt. Das zweite zur Verfügung stehende Keyword ist even und wählt alle geraden Kind-Elemente aus.

Das Beispiel mit odd sieht dann so aus:

Beispieldatei öffnen

Syntax mit nummerischer Angabe

Neben den beiden Keywords habt Ihr noch die Möglichkeit Child-Element mit Hilfe einer Berechnung auf Grundlage von n auszuwählen. Der Syntax sieht dann beispielsweise so aus:

tr:nth-child(2n+2) {
  background:silver;
}

Dieses Beispiel färbt ebenfalls jede zweite Tabellenzeile – beginnend mit Zeile 2 – ein. Doch warum ist das so? Entscheidend um die gesamte Berechnungen zu verstehen ist es das Verhalten von n zu verstehen.

Die Berechnung in den Klammern von :nth-child() wird so oft durchlaufen wie es nötig ist um alle Child-Elemente auszuwählen. Dabei ist n zunächt eine Null (0) und erhöht seinen Wert nach jeder Berechnung um 1. Für dieses Beispiel sieht das folgendermaßen aus:

2*0 + 2 = 2

Im ersten Durchlauf wird steht n für eine Null. Es wird demanch die zweite Tabellenzeile ausgewählt.

2*1 + 2 = 4

Im zweiten Durchlauf hat n den Wert 1 eingenommen. Entsprechend der Rechnung wird nun die vierte Zeile ausgewählt.

2*2 + 2 = 6

Im dritten Durchlauf steht n für eine 2. Demnach wird die sechste Zeile ausgewählt. Und so weiter.

Sobald Ihr dieses System einmal verstanden habt ist es ganz einfach es anzuwenden. Als Eselsbrücke habe ich selbst immer folgendes Schema im Hinterkopf. Achtung! Diese Grafik funktioniert nur bei der Addition positiver Werte.

Der Vollständigkeit halber möchte ich noch ein zweites Beispiel berechnen. Entsprechend meiner Eselsbrücke sollte die erste eingefärbte Zeile die Nummer 7 tragen, anschließend wird die zehnte, die 13. etc. eingefärbt.

tr:nth-child(3n+7) {
  background:silver;
}

• 3*0 + 7 = 7
• 3*1 + 7 = 10
• 3*2 + 7 = 13
• etc

Das Live-Beispiel sieht so aus:

Beispieldatei öffnen

Auch negative Berechnungen sind möglich

Es ist auch möglich die Werte zu subtrahieren, bzw. ein negatives n zu verwenden. Diese Berechnungen können leicht verwirren – insbesondere vor dem Hintergrund, dass negative Werte oder ein Wert von 0 nicht dargestellt werden.

tr:nth-child(3n-2) {
  background:silver;
}

• 3*0 – 2 = -2 = Kein Element wird ausgewählt
• 3*1 – 2 = 1
• 3*2 – 2 = 4
• etc

Das Live-Beispiel sieht so aus:

Beispieldatei öffnen

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing