CSS/Selektoren/nth-child

Die :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 Sie vorgeben. Diese Formel hat die Form An+B, also beispielsweise 3n+1. Wie Sie diese Formel verwenden, 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 Sie beispielsweise eine Liste haben, in der einige Listeneinträge die Klasse 'bonus' haben, und Sie einen Selektor suchen, 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) selektieren Sie jeden zweiten Bonuseintrag.

Syntax	:nth-child(An+B of S)
Parameter	{{{Parameter}}}}}
Browsersupport	Details: caniuse.com

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

• CSS/Tutorials/Selektoren/strukturelle_Pseudoklassen#nth-child
• SELF-Blog: CSS Selektoren - :nth-match von Rolf B., 30. Mai 2023

Weblinks

• W3C: nth-child Selectors Level 4