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.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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:
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:
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:
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Das könnte dich auch interessieren
7 Kommentare
Kommentar verfassen
Matthias
Verfasst am 9. März 2011 um 7:22 Uhr.
Den ersten Teil kann ich mir noch gut vorstellen. Aber denkst Du dass es für die Rechenbeispiele auch praxisnahe Verwendungen gibt? Wie auch immer, gut zu wissen, falls man es doch mal braucht.
Jonas Hellwig
Verfasst am 9. März 2011 um 8:05 Uhr.
@Matthias: Ich könnte mir vorstellen, dass es bei komplexeren Tabellen z.B. bei Sportereignissen sinnvoll eingesetzt werden kann.
Darüber hinaus lässt sich die Klasse ja auch auf divs anwenden. Somit lassen sich bestimmt anspruchsvolle und komplexe Layouts realisieren. Aber du hast recht. Am häufigsten wird die odd/even-Anwendung sein.
Oliver
Verfasst am 9. März 2011 um 15:47 Uhr.
:nth-child ist Spitze, wie bereits auf http://maddesigns.de/nth-child-pseudo-selektor-css3-adventskalender-tag-13-550.html demonstriert, sind damit selbst sehr komplexe Div-Strukturen problemlos aufzubauen, und das völlig ohne Klassen, ID’s, Clearfixes, Wrapper oder ähnlichem.
Florian Wenzel
Verfasst am 9. März 2011 um 18:55 Uhr.
Javascript z.B. ganz einfach mit jquery wäre auch ne Option.
Günther
Verfasst am 16. Dezember 2013 um 22:50 Uhr.
Interessant ist auch – finde ich jedenfalls – die folgende Rechenmöglichkeit: tr:nth-child(-2n+5) – hierdurch werden nur die Tabellenzeilen 1, 3 und 5 angesprochen.
Entsprechend kann man mit auch nur die ersten 3 Zeilen „stylen“: tr:nth-child(-n+3){…}