:nth-child

Ü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

BCD tables only load in the browser

Siehe auch

:nth-of-type (en-US)