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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
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:
Feedback & Ergänzungen – 7 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
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){…}
[…] häufiges Anwendungsgebiet ist beispielsweise das abwechselnde Einfärben von Tabellenzeilen. Einen ausführlichen Artikel zu dieser CSS-Eigenschaft habe ich bereits vor einiger Zeit veröffentlicht. Leider unterstützt der Internet Explorer das […]
[…] einfache Erklärung zum Thema :nth-child findet ihr hier, die gesamte Technik im Bezug auf responsive Design wird ausführlich auf irishstu.com […]
Javascript z.B. ganz einfach mit jquery wäre auch ne Option.
: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.
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.
@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.