: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