Ü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 einfachn
, 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üsselworteven
verwendet werden.2n+1
würde auf die Elemente 1, 3, 5, 7, etc. zutreffen. Hier gibt es auch eine Kurzform: Das Schlüsselwortodd
.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><em></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><em></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><span></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><em></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><em></code> ist,
und kein <code><span></code>, und <code>nth-of-type</code> selektiert nur
Kinder dieses Typs. Das <code><em></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