Übersicht

Die :nth-child(an+b) CSS Pseudo-Klasse passt auf ein Element, das im Dokumentbaum an+b-1 Geschwisterknoten vor sich hat, wobei n einen gegebenen positiven Wert oder den Wert 0 hat. Zudem muss das Element einen Elternknoten haben. Einfacher ausgedrückt: Beginnend bei einem Startindex b trifft der Selector auf jedes n-te folgende Element zu.

Einige Beispiele:

  • 1n+0, oder einfach n, trifft auf jedes Kindelement zu.
  • 2n+0, oder einfach 2n, würde auf die Kindelemente 2, 4, 6, 8, etc. zutreffen. Hier kann auch einfach das Schlüsselwort even verwendet werden.
  • 2n+1 würde auf die Elemente 1, 3, 5, 7, etc. zutreffen. Hier gibt es auch eine Kurzform: Das Schlüsselwort odd.
  • 3n+4 würde auf die folgenden Elemente zutreffen: 4, 7, 10, 13, etc.

Die Werte a und b müssen beide Integer sein, und der Index des ersten Kindelements eines Knotens ist 1. In anderen Worten, diese Klasse trifft auf alle Kindelemente zu, deren Index Teil der Menge { an + b; n = 0, 1, 2, ... } ist.

Ein beliebter Anwendungsfall ist das Auswählen jeder zweiten Reihe in einer Tabelle.

Syntax

element:nth-child(an + b) { style properties }

Beispiele

Beispielselektoren

tr:nth-child(2n+1)
Wählt die ungeraden Reihen einer HTML-Tabelle aus.
tr:nth-child(odd)
Wählt die ungeraden Reihen einer HTML-Tabelle aus.
tr:nth-child(2n)
Wählt die geraden Reihen einer HTML-Tabelle aus.
tr:nth-child(even)
Wählt die geraden Reihen einer HTML-Tabelle aus.
span:nth-child(0n+1)
Selektiert ein span Element, welches das erste Kind seines Elternknotens ist. Dies entspricht dem :first-child Selector.
span:nth-child(1)
Entspricht dem vorherigen Beispiel.
span:nth-child(-n+3)
Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.

Gesamtbeispiel

Im folgenden ein HTML-Beispiel:

<p><code>span:nth-child(2n+1)</code>, <em>ohne</em> ein <code>&lt;em&gt;</code>
 unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.</p>

<div class="first">
      <span>Dieses span ist ausgewählt</span>
      <span>Dieses span is nicht. :(</span>
      <span>Wie sieht's mit diesem aus?</span>
      <span>Und dieses?</span>
      <span>Noch ein Beispiel</span>
      <span>Und noch eins</span>
      <span>Zu guter Letzt</span>
</div>

<p><code>span:nth-child(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
 unter den Kindelementen. Element 1, 5, und 7 sind ausgewählt. 3 wird beim Zählen berücksichtigt
 weil es ein Kind ist, aber es ist nicht ausgewählt, weil es kein 
<code>&lt;span&gt;</code> ist.</p>

<div class="second">
      <span>Dieses span ist ausgewählt!</span>
      <span>Dieses span nicht. :(</span>
      <em>Dieses ist ein em.</em>
      <span>Wie sieht's mit diesem aus?</span>
      <span>Und dieses?</span>
      <span>Noch ein Beispiel</span>
      <span>Und noch eins</span>
      <span>Zu guter Letzt</span>
</div>

<p><code>span:nth-of-type(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
 unter den Kindern. Element 1, 4, 6, und 8 sind ausgewählt. 3 ist
 nicht bei der Zählung berücksichtigt oder ausgewählt, weil es ein <code>&lt;em&gt;</code> ist, 
und kein <code>&lt;span&gt;</code>, und <code>nth-of-type</code> selektiert nur
 Kinder dieses Typs. Das <code>&lt;em&gt;</code> wird übersprungen und ignoriert.
</p>
 
<div class="third">
      <span>Dieses span ist ausgewählt!</span>
      <span>Dieses span nicht. :(</span>
      <em>Dieses ist ein em.</em>
      <span>Wie sieht's mit diesem aus?</span>
      <span>Und dieses?</span>
      <span>Noch ein Beispiel</span>
      <span>Und noch eins</span>
      <span>Zu guter Letzt</span>
</div>

...dieses CSS wird verwendet...

html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
    
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

...und erzeugt folgendes Resultat:

Spezifikationen

Spezifikation Status Kommentar
Selectors Level 4
Die Definition von ':nth-child' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung
Selectors Level 3
Die Definition von ':nth-child' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:nth-child()Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 9.5
Hinweise
Vollständige Unterstützung 9.5
Hinweise
Hinweise Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1
Hinweise
Vollständige Unterstützung 10.1
Hinweise
Hinweise Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS Vollständige Unterstützung 3.1Samsung Internet Android Vollständige Unterstützung Ja
of <selector> syntaxChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 304163.
Edge Keine Unterstützung NeinFirefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 854148.
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Vollständige Unterstützung 9WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 854148.
Opera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 9Samsung Internet Android Keine Unterstützung Nein
Matches elements with no parentChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: mdnwebdocs-bot,