:nth-child ist eine Pseudoklasse, die nach der Position unter den Geschwistern auswählt. Damit lassen sich jede zweite Zeile, die ersten drei oder jedes vierte Element ansprechen.
- :nth-child
Pseudoklasse, die Elemente nach ihrer Position unter den Geschwistern auswählt.
Beispiel: „:nth-child zählt alle Geschwister, nicht nur die gleichartigen.“
Das Muster lesen
tr:nth-child(even) /* jede zweite Zeile */
li:nth-child(3) /* das dritte */
li:nth-child(3n) /* jedes dritte */
li:nth-child(-n + 3) /* die ersten drei */Das n ist ein Zähler, der bei null beginnt. 3n trifft damit das dritte, sechste, neunte Element. Mit einem Minus davor kehrt sich die Zählrichtung um, was die Schreibweise für die ersten drei erklärt.
Die Falle mit den Geschwistern
Gezählt werden alle Kinder des Elternelements, nicht nur die der gesuchten Art. Steht zwischen zwei Absätzen eine Überschrift, verschiebt sie die Zählung. Wer nur die gleichartigen zählen will, nimmt :nth-of-type().