Mehr Kontrolle über die Auswahl von :nth-child() mit der von S-Syntax

Filtern Sie eine Gruppe untergeordneter Elemente vorab, bevor Sie die An+B-Logik darauf anwenden.

Bramus

Die Pseudoklassenselektoren :nth-child() und :nth-last-child()

Mit dem Pseudoklassenselektor :nth-child() lassen sich Elemente im DOM anhand ihres Index auswählen. Mit der An+B-Mikrosyntax können Sie genau festlegen, welche Elemente ausgewählt werden sollen.

• :nth-child(2): Wählen Sie das zweite untergeordnete Element aus.
• :nth-child(2n): Wählen Sie alle geraden untergeordneten Elemente (2., 4., 6., 8. usw.) aus.
• :nth-child(2n+1): Wählt alle ungeraden untergeordneten Elemente (1., 3., 5., 7. usw.) aus.
• :nth-child(5n+1): Wählen Sie das 1. (=(5×0)+1), 6. (=(5×1)+1), 11. (=(5×2)+1), … untergeordnete Element aus.
• :nth-child(5n+2): Wähle das 2. (=(5×0)+2), 7. (=(5×1)+2), 12. (=(5×2)+2), … untergeordnete Element aus.

Wenn Sie den Parameter A weglassen, haben Sie jedoch mehr Auswahlmöglichkeiten. Beispiel:

• :nth-child(n+3): Wählt alle untergeordneten Elemente ab dem dritten aus (3., 4., 5. usw.).
• :nth-child(-n+5): Wählt alle untergeordneten Elemente bis zum fünften aus (1., 2., 3., 4., 5.).

Wenn Sie einige dieser :nth-child()-Auswahlen kombinieren, können Sie Bereiche von Elementen auswählen:

• :nth-child(n+3):nth-child(-n+5): Wählt alle untergeordneten Elemente vom dritten bis zum fünften aus (3., 4., 5.).

Mit :nth-last-child() können Sie ähnliche Auswahlen treffen. Die Zählung beginnt jedoch nicht am Anfang, sondern am Ende.

Auswahlen mit der of S-Syntax vorfiltern

Neu in CSS-Selektoren Level 4 ist die Möglichkeit, optional eine Selektorliste an :nth-child() und :nth-last-child() zu übergeben.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

Wenn of S angegeben ist, wird die An+B-Logik nur auf Elemente angewendet, die der angegebenen Selektorliste S entsprechen. Das bedeutet, dass Sie Kinder im Grunde vorfiltern können, bevor An+B seine Arbeit erledigt.

Beispiele

Mit :nth-child(2 of .highlight) wird beispielsweise das zweite übereinstimmende Element mit der Klasse .highlight ausgewählt. Anders ausgedrückt: Wählen Sie aus allen untergeordneten Elementen mit der Klasse .highlight das zweite aus.

Im Gegensatz dazu wird mit .highlight:nth-child(2) das Element ausgewählt, das die Klasse .highlight hat und das zweite untergeordnete Element ist.

Im folgenden Demo sehen Sie diesen Unterschied:

• Das Element, das :nth-child(2 of .highlight) entspricht, hat einen rosa Rahmen.
• Das Element, das .highlight:nth-child(2) entspricht, hat einen grünen Umriss.

S ist eine Selektorliste, d. h., es können mehrere durch Kommas getrennte Selektoren angegeben werden. Mit :nth-child(4 of .highlight, .sale) wird beispielsweise das vierte Element aus einer Gruppe von gleichgeordneten Elementen ausgewählt, das entweder .highlight oder .sale ist.

Im folgenden Demo-Video hat das Element, das mit :nth-child(4 of .highlight, .sale) übereinstimmt, einen orangefarbenen Rahmen.

Zebra-Streifen – noch einmal

Ein klassisches Beispiel für die Verwendung von :nth-child() ist das Erstellen einer zebragestreiften Tabelle. Bei dieser visuellen Technik werden die Farben der einzelnen Tabellenzeilen abwechselnd dargestellt. Normalerweise würde man so vorgehen:

tr:nth-child(even) {
  background-color: lightgrey;
}

Bei statischen Tabellen funktioniert das gut, aber bei dynamischem Filtern der Tabelleninhalte wird es problematisch. Wenn beispielsweise Zeile 2 ausgeblendet wird, sind die Zeilen 1 und 3 sichtbar, jeweils mit derselben Hintergrundfarbe.

Um das Problem zu beheben, können wir :nth-child(An+B [of S]?) verwenden und die ausgeblendeten Zeilen aus der An+B-Logik ausschließen:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Das ist doch praktisch, oder?

Foto von Markus Spiske auf Unsplash