kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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 und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

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

  1. 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.

  2. 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.

  3. Florian Wenzel

    Verfasst am 9. März 2011 um 18:55 Uhr.

    Javascript z.B. ganz einfach mit jquery wäre auch ne Option.

  4. 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){…}

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.