Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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:

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

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Günther
    schrieb am 16.12.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){…}

    Antworten
  2. :nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen | kulturbanause blog
    schrieb am 23.10.2012 um 08:27 Uhr:

    […] 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 […]

    Antworten
  3. Tabellen im Responsive Webdesign | kulturbanause blog
    schrieb am 20.06.2012 um 08:40 Uhr:

    […] einfache Erklärung zum Thema :nth-child findet ihr hier, die gesamte Technik im Bezug auf responsive Design wird ausführlich auf irishstu.com […]

    Antworten
  4. Florian Wenzel
    schrieb am 09.03.2011 um 18:55 Uhr:

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

    Antworten
  5. Oliver
    schrieb am 09.03.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.

    Antworten
  6. Matthias
    schrieb am 09.03.2011 um 07: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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 09.03.2011 um 08: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.

      Antworten

Schreibe einen Kommentar zu Günther Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: