:nth-child

Der Selektor :nth-child erlaubt es Ihnen, ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge nach einer Formel auszuwählen.

/* Select the first list item */
li:nth-child(1) { }

/* Select the 5th list item */
li:nth-child(5) { }

/* Select every other list item starting with first */
li:nth-child(odd) { }

/* Select every 3rd list item starting with first */
li:nth-child(3n - 2) { }

/* Select every 3rd list item starting with 2nd */
li:nth-child(3n - 1) { }

/* Select every 3rd child item, as long as it has class "el" */
.el:nth-child(3n) { }

Er ist in der CSS Selectors Level 3 Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er zur Gestaltung von Inhalten basierend auf seiner Beziehung zu übergeordneten und Geschwisterelementen verwendet wird.

Nehmen wir an, wir erstellen ein CSS-Grid und möchten den Rand auf jedem vierten Grid-Modul entfernen. Hier ist das entsprechende HTML

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

Anstatt jeder vierten Elemente eine Klasse hinzuzufügen (z. B. .last), können wir :nth-child verwenden

.module:nth-child(4n) {
  margin-right: 0;
}

Der Selektor :nth-child nimmt ein Argument entgegen: dies kann eine einzelne Ganzzahl, die Schlüsselwörter even, odd oder eine Formel sein. Wenn eine Ganzzahl angegeben wird, wird nur ein Element ausgewählt – aber die Schlüsselwörter oder eine Formel durchlaufen alle Kinder des übergeordneten Elements und wählen übereinstimmende Elemente aus – ähnlich wie beim Navigieren von Elementen in einem JavaScript-Array. Die Schlüsselwörter „even“ und „odd“ sind selbsterklärend (2, 4, 6, usw. bzw. 1, 3, 5). Die Formel wird mit der Syntax an+b konstruiert, wobei

• „a“ ein ganzzahliger Wert ist
• „n“ der buchstäbliche Buchstabe „n“ ist
• „+“ ein Operator ist und entweder „+“ oder „-“ sein kann
• „b“ eine ganze Zahl ist und erforderlich ist, wenn ein Operator in der Formel enthalten ist

Es ist wichtig zu beachten, dass diese Formel eine Gleichung ist und jedes Geschwisterelement durchläuft, um zu bestimmen, welches ausgewählt wird. Der Teil „n“ der Formel, falls enthalten, repräsentiert eine Menge von zunehmenden positiven ganzen Zahlen (ähnlich wie beim Durchlaufen eines Arrays). In unserem obigen Beispiel haben wir jedes vierte Element mit der Formel 4n ausgewählt, was funktionierte, weil jedes Mal, wenn ein Element überprüft wurde, „n“ um eins erhöht wurde (4×0, 4×1, 4×2, 4×3, usw.). Wenn die Reihenfolge eines Elements mit dem Ergebnis der Gleichung übereinstimmt, wird es ausgewählt (4, 8, 12, usw.). Eine ausführlichere Erklärung der beteiligten Mathematik finden Sie in diesem Artikel.

Zur weiteren Veranschaulichung sind hier einige Beispiele für gültige :nth-child-Selektoren

Glücklicherweise müssen Sie nicht immer die Mathematik selbst machen – es gibt mehrere :nth-child-Tester und Generatoren

• CSS-Tricks Tester
• Leas Verou Tester

:nth-child(an + b von <selektor>)

Es gibt einen wenig bekannten Filter, der zu :nth-child hinzugefügt werden kann, gemäß der CSS Selectors Spezifikation: Die Fähigkeit, das :nth-child einer Teilmenge von Elementen auszuwählen, unter Verwendung des of-Formats. Angenommen, Sie haben eine Liste mit gemischtem Inhalt: Einige haben die Klasse .video, einige haben die Klasse .picture, und Sie möchten die ersten 3 Bilder auswählen. Dies könnten Sie mit dem „of“-Filter wie folgt tun

:nth-child(-n+3 of .picture) {
  /* 
     Selects the first 3 elements
     applied not to ALL children but 
     only to those matching .picture 
  */
}

Beachten Sie, dass dies sich von der direkten Anhängung eines Selektors an den :nth-child-Selektor unterscheidet

.picture:nth-child(-n+3) {
  /* 
     Not the same! 
     This applies to elements matching .picture 
     which _also_ match :nth-child(-n+3)  
  */
}

Das kann etwas verwirrend sein, daher könnte ein Beispiel helfen, den Unterschied zu verdeutlichen

Die Browserunterstützung für den „of“-Filter ist sehr begrenzt: Zum Zeitpunkt des Schreibens unterstützte nur Safari die Syntax. Um den Status Ihres bevorzugten Browsers zu überprüfen, finden Sie hier offene Probleme im Zusammenhang mit :nth-child(an+b of s)

• Firefox: Unterstützung für nth-child(An+B of sel)
• Chrome: Implementierung von :nth-child(an+b of S)

Interessante Punkte

• :nth-child durchläuft Elemente beginnend von oben in der Quellreihenfolge. Der einzige Unterschied zwischen ihm und :nth-last-child besteht darin, dass letzteres Elemente durchläuft, beginnend von unten in der Quellreihenfolge.
• Die Syntax zum Auswählen der ersten n Elemente ist etwas unintuitiv. Sie beginnen mit -n, plus der positiven Anzahl der Elemente, die Sie auswählen möchten. Zum Beispiel wählt li:nth-child(-n+3) die ersten 3 li-Elemente aus.
• Der Selektor :nth-child ist dem :nth-of-type sehr ähnlich, jedoch mit einem entscheidenden Unterschied: er ist weniger spezifisch. In unserem obigen Beispiel würden sie das gleiche Ergebnis liefern, da wir nur .module-Elemente durchlaufen, aber wenn wir eine komplexere Gruppe von Geschwistern durchlaufen würden, würde :nth-child versuchen, alle Geschwister abzugleichen, nicht nur Geschwister desselben Elementtyps. Dies offenbart die Stärke von :nth-child – es kann jedes Geschwisterelement in einer Anordnung auswählen, nicht nur Elemente, die vor dem Doppelpunkt angegeben sind.

Verwandte Eigenschaften

• nth-last-child
• nth-of-type
• nth-last-of-type
• first-of-type
• last-of-type

Weitere Ressourcen

• Nützliche :nth-child-Rezepte
• Mozilla Docs
• Artikel von QuirksMode
• Artikel von Sitepoint

Browser-Unterstützung

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

:nth-child wurde im CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Browserversionen ihn nicht unterstützen. Die moderne Browserunterstützung ist jedoch tadellos, und die neuen Pseudoselektoren werden in Produktionsumgebungen weit verbreitet eingesetzt. Wenn Sie ältere Browserunterstützung benötigen, können Sie entweder ein Polyfill für IE verwenden oder diese Selektoren auf nicht-kritische Weise à la progressive enhancement nutzen, was empfohlen wird.