Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox 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 JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android 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 iOS Vollständige Unterstützung 3.1Samsung Internet Android Vollständige Unterstützung Ja
of <selector> syntaxChrome Keine Unterstützung NeinEdge ? Firefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 854148.
IE ? Opera ? Safari Vollständige Unterstützung 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 854148.
Opera Android ? Safari iOS Vollständige Unterstützung 9Samsung Internet Android Keine Unterstützung Nein
Matches elements with no parentChrome Vollständige Unterstützung 57Edge ? Firefox Vollständige Unterstützung 52IE ? Opera Vollständige Unterstützung 44Safari ? WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Edge Mobile ? Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 44Safari iOS ? Samsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Faldrian, DagmarTimmreck, teoli, Sebastianz, antonharald
Zuletzt aktualisiert von: SJW,