Florence Maurice

Selektor :nth-child(X of Y)

Geschrieben am: 1.5.2023

Der Selektor :nth-child(X of Y ) ist eine sehr nützliche Ergänzung in CSS. Und er ist auch etwas, was wirklich bisher gefehlt hat. Aber nun zu den Details.

Nehmen wir einmal folgende geordnete Liste von Obst inklusive Beerenobst. Zu beachten: Einige der Elemente haben zusätzlich die Klasse beere.

<ol>
  <li>Pflaume</li>
  <li class="beere">class=beere Johannisbeere</li>
  <li>Apfel</li>
  <li>Kirsche</li>
  <li class="beere">class=beere Aronia-Beere</li>
  <li class="beere">class=beere Stachelbeere</li>
  <li>Birne</li>
  <li class="beere">class=beere Erdbeere</li>
</ol>

Das Beispiel sieht nach ein paar Formatierungen so aus:

Wenn ich nun schreibe:

li:nth-child(even) {}

... dann wähle ich damit alle geraden li-Elemente aus. Also das 2., das 4., das 6. und das 8. So weit so klassisch.

Mit dem ebenfalls noch klassischen Selektor ...

.beere:nth-child(even) {}

... hingegen wähle ich alle geraden Elemente aus, die zusätzlich die Klasse beere haben (das ist vielleicht etwas anders, als man spontan vermutet hätte). Im Beispiel sind das das 2., das 6. und das 8. Element. Das 4. Element ist zwar gerade (even), hat aber nicht die Klasse beere und wird deswegen nicht ausgewählt.

Kommen wir nun zu dem neuen Selektor. Der neue Selektor beinhaltet zusätzlich das Wort of mit einem Selektor (of .beere) zur Filterung:

li:nth-child(even of .beere) {}

Das wählt von allen Elementen mit der Klasse beere die geraden aus. Das sind das 5. und das 8. Element.

Es wird also eine Liste von Elementen mit der Klasse beere erstellt und von dieser dann die geraden ausgewählt. Im Beispiel gibt es ja:

• Johannisbeere
• Aronia-Beere
• Stachelbeere
• Erdbeere

Von diesen werden die geraden Elemente ausgewählt, also Aronia-Beere und Erdbeere. Die anderen Elemente dazwischen (ohne die Klasse beere) spielen dabei keine Rolle.

Diesen Selektor kann man beispielsweise gut nutzen, wenn man dynamisch Tabellen filtert und dabei auch Zeilen ausblendet. Damit dann trotzdem noch eine Zebratabellen-Formatierung funktioniert, hilft der Selektor tr:nth-child(even of :not([hidden])) {}. Das Beispiel dazu gibts bei developer.chrome

Der Selektor funktioniert in Chrome/Edge ab 111, in Firefox ab 113, in Safari ab 9.

Ein interaktives Beispiel - das allerdings zusätzlich auf den Selektor :has() setzt und deswegen nur in Chrome/Edge funktioniert -, habe ich bei CodePen bereitgestellt. Und übrigens: Diese vorgestellte Filterung geht auch bei :nth-last-child(X of Y).