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

Filtern Sie eine Reihe von untergeordneten Elementen vor, bevor Sie die An+B-Logik darauf anwenden.

Bramus

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

Mit dem Pseudoklassenselektor :nth-child() ist es möglich, Elemente im DOM nach ihrem Index auszuwählen. Mit der An+B-Mikrosyntax lässt sich genau steuern, welche Elemente Sie auswählen.

  • :nth-child(2): Wählen Sie das zweite untergeordnete Element aus.
  • :nth-child(2n): Alle untergeordneten Elemente auswählen (z. B. 2., 4., 6., 8. und so weiter)
  • :nth-child(2n+1): Alle ungeraden untergeordneten Elemente auswählen (1., 3., 5., 7. und so weiter).
  • :nth-child(5n+1): 1. (=(5×0)+1), 6. (=(5×1)+1), 11. (=(5×2)+1) oder das untergeordnete Element auswählen.
  • :nth-child(5n+2): Wählen Sie das zweite (=(5×0)+2), 7. (=(5×1)+2), 12. (=(5×2)+2) ... untergeordnetes Element aus.

Sie können jedoch mehr Creatives auswählen, wenn Sie den A-Parameter weglassen. Beispiel:

  • :nth-child(n+3): Alle Kinder auf der dritten Ebene auswählen (d. h. die dritte, vierte, fünfte usw.).
  • :nth-child(-n+5): Alle Kinder bis zum 5. Kind auswählen (1., 2., 3., 4., 5.).

Wenn Sie einige der folgenden :nth-child()-Optionen kombinieren, können Sie Elementbereiche auswählen:

  • :nth-child(n+3):nth-child(-n+5): Alle Kinder vom 3. bis 5. (3., 4., 5.) auswählen.

Mit :nth-last-child() können Sie eine ähnliche Auswahl vornehmen, aber die Zählung beginnt nicht gleich am Anfang, sondern am Ende.

Auswahl mit der Syntax of S vorfiltern

Neu in CSS-Selektoren der Stufe 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 im Wesentlichen, dass Sie untergeordnete Elemente vorfiltern können, bevor An+B seine Aufgabe ausführt.

Unterstützte Browser

  • 111
  • 111
  • 113
  • 9

Beispiele

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

Im Gegensatz zu .highlight:nth-child(2), bei dem das Element mit der Klasse .highlight ausgewählt wird und auch das zweite untergeordnete Element ist.

In der Demo unten können Sie diesen Unterschied sehen:

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

S ist eine Auswahlliste, in der mehrere durch ein Komma getrennte Selektoren zulässig sind. Beispiel: :nth-child(4 of .highlight, .sale) wählt das vierte Element aus, das entweder .highlight oder .sale aus einer Gruppe von gleichgeordneten Elementen ist.

In der folgenden Demo hat das Element, das mit :nth-child(4 of .highlight, .sale) übereinstimmt, einen orangefarbenen Umriss.

Zebrastreifen, noch einmal

Ein klassisches Beispiel für die Verwendung von :nth-child() ist das Erstellen einer gestreiften Zebra-Tabelle. Es ist eine visuelle Technik, bei der jede Tabellenzeile die Farben abwechselt. Normalerweise würde dies so aussehen:

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

Dies funktioniert zwar bei statischen Tabellen gut, wird jedoch problematisch, wenn Sie beginnen, die Tabelleninhalte dynamisch zu filtern. Wenn beispielsweise die zweite Zeile ausgeblendet wird, sind die ersten und dritten Zeilen mit derselben Hintergrundfarbe sichtbar.

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

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

Ganz schön süß, oder?

Foto von Markus Spiske auf Unsplash