Wie nth-child funktioniert

Es gibt einen CSS-Selektor, genauer gesagt einen Pseudo-Selektor, namens :nth-child. Hier ist ein Beispiel für dessen Verwendung

ul li:nth-child(3n+3) {  
  color: #ccc;
}

Das obige CSS wählt jedes dritte Listenelement innerhalb von ungeordneten Listen aus. Das heißt, das 3., 6., 9., 12. usw. Aber wie funktioniert das? Und was kann man sonst noch mit :nth-child machen? Schauen wir uns das mal an.

Es kommt darauf an, was sich in diesen Klammern befindet. nth-child akzeptiert an dieser Stelle zwei Schlüsselwörter: even (gerade) und odd (ungerade). Diese sollten ziemlich selbsterklärend sein. „Even“ wählt Elemente mit geraden Nummern aus, wie das 2., 4., 6. usw. „Odd“ wählt Elemente mit ungeraden Nummern aus, wie das 1., 3., 5. usw.

Wie im ersten Beispiel zu sehen ist, akzeptiert nth-child auch Ausdrücke zwischen den Klammern. Der einfachste mögliche Ausdruck? Nur eine Zahl. Wenn Sie einfach eine Zahl in die Klammern setzen, wird nur das Element mit dieser Nummer ausgewählt. Hier ist zum Beispiel, wie man nur das 5. Element auswählt

ul li:nth-child(5) {  
  color: #ccc;
}

Kommen wir aber auf das 3n+3 aus dem ursprünglichen Beispiel zurück. Wie funktioniert das? Warum wählt es jedes dritte Element aus? Der Trick liegt im Verständnis von „n“ und dem algebraischen Ausdruck, den es darstellt. Denken Sie daran, dass n bei Null beginnt und dann alle positiven ganzen Zahlen durchläuft. Vervollständigen Sie dann den Ausdruck. Also ist 3n gleich „3xn“, und der gesamte Ausdruck ist „(3xn)+3“. Wenn wir nun Null und die positiven ganzen Zahlen einsetzen, erhalten wir

(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

Wie sieht es mit :nth-child(2n+1) aus?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.

Moment mal! Das ist dasselbe wie „ungerade“, also muss man das wahrscheinlich nicht sehr oft verwenden. Aber warten Sie mal. Haben wir nicht unser ursprüngliches Beispiel als zu kompliziert entlarvt? Was wäre, wenn wir anstelle von „3n+3“ 3n+0 oder sogar einfacher 3n verwenden würden?

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
etc.

Wie Sie sehen, sind die Treffer genau die gleichen, es ist kein „+3“ nötig. Wir können negative n-Werte verwenden und auch Subtraktion in den Ausdrücken. Zum Beispiel 4n-1

(4 x 0) - 1 = -1 = no match
(4 x 1) - 1 = 3 = 3rd Element
(4 x 2) - 1 = 7 = 7th Element
etc.

Die Verwendung von -n-Werten scheint etwas seltsam zu sein, denn wenn das Endergebnis negativ ist, gibt es keinen Treffer, daher müssen Sie dem Ausdruck etwas hinzufügen, um ihn wieder positiv zu machen. Wie sich herausstellt, ist dies eine ziemlich clevere Technik. Sie können sie verwenden, um die „ersten n Elemente“ mit -n+3 auszuwählen

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
etc.

Sitepoint hat einen schönen Referenzleitfaden, der diese praktische Tabelle enthält, die ich hier schamlos wieder veröffentlichen werde

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	3.2+	Alle	9.5+	9+	Alle	Alle

Immer noch nicht kapiert?

Ich bin kein großer Fan von der Phrase „Ich bin ein visueller Lerner.“ Natürlich bist du das, das sind alle. Visuelle Hilfsmittel sind in solchen Situationen enorm hilfreich. Um zu helfen, habe ich eine kleine :nth-child-Testerseite zusammengestellt. Dort können Sie Ausdrücke eingeben und die Ergebnisse sehen, was es darunter auswählt.

Siehe auch diese Seite mit nützlichen :nth-child-Rezepten für schnellen Kopier- und Einfügecode für die häufigsten positionsbezogenen Auswahlbedürfnisse.