CSS/Selektoren/nth-child

Der :nth-child-Pseudoklasse wählt Elemente an Hand der Position in ihrem Elternelement aus. Dazu nummeriert der Browser die Kindelemente ab 1 durch (nur Elemente, keine Textknoten oder Kommentare). Ob ein Element sichtbar ist oder ob die visuelle Darstellung eine andere Position suggeriert, spielt dabei keine Rolle, es wird ausschließlich die Position im DOM betrachtet.

Welche Elementnummer ausgewählt wird, bestimmt der Browser an Hand einer Formel, die du vorgibst. Diese Formel hat die Form An+B, also beispielsweise 3n+1. Wie du diese Formel verwendest, haben wir im Einführungskapitel zu Selektoren beschrieben.

Die Angabe of S ist optional. S steht für einen beliebigen CSS Selektor (nur Pseudoelemente sind nicht zugelassen) und stellt einen Filter dar, der die Elemente einschränkt, die für die :nth-child-Zählung berücksichtigt werden. Wenn du beispielsweise eine Liste hast, in der einige Listeneinträge die Klasse 'bonus' haben, und du einen Selektor suchst, der jeden zweiten Bonuseintrag auswählt, dann wird li.bonus:nth-child(2n) nicht funktionieren, weil so alle Listeneinträge in die Zähling eingehen, nicht nur die Bonuseinträge. Mit li:nth-child(2n of .bonus) selektierst du jeden zweiten Bonuseintrag.

Syntax

:nth-child(An+B of S)

Beispiel

tr:nth-child(odd) {
   border-bottom: thin solid black;
}
li:nth-child(-n+3 of .match) {
   background-color: yellow;
}

p:nth-child(odd)

unter jede Tabellenzeile mit ungerader Nummer wird ein Strich gezogen (Lesehilfe).

li:nth-child(-n+3 of .match)

die ersten drei <li>-Elemente, die die Klasse match tragen, werden mit einem gelben Hintergrund hervorgehoben

Siehe auch

• Selektoren in CSS
  • nth-child
• CSS/Custom_properties_(CSS-Variablen) Längeneinheiten und custom_properties
• SVG-Uhr (Markierungen setzen)
• SELF-Blog: CSS Selektoren - :nth-match von Rolf B., 30. Mai 2023

Weblinks

• W3C: nth-child Selectors Level 4