:nth-child()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die :nth-child() CSS Pseudoklasse wählt Elemente basierend auf den Indizes der Elemente in der Kindliste ihrer Eltern aus. Mit anderen Worten wählt der :nth-child()-Selektor Kindelemente entsprechend ihrer Position unter allen Geschwisterelementen innerhalb eines Elternelements aus.

Probieren Sie es aus

Hinweis: Im element:nth-child()-Syntax wird die Kinderzählung um alle Geschwisterkinder eines beliebigen Elementtyps erweitert; es wird jedoch nur dann als Übereinstimmung angesehen, wenn das Element an dieser Kinderposition mit den anderen Komponenten des Selektors übereinstimmt.

Syntax

:nth-child() nimmt ein einziges Argument, das ein Muster für die Übereinstimmung von Elementindizes in einer Liste von Geschwistern beschreibt. Elementindizes beginnen bei 1.

css
:nth-child(<nth> [of <complex-selector-list>]?) {
  /* ... */
}

Schlüsselwortwerte

odd

Repräsentiert Elemente, deren numerische Position in einer Serie von Geschwistern ungerade ist: 1, 3, 5, usw.

even

Repräsentiert Elemente, deren numerische Position in einer Serie von Geschwistern gerade ist: 2, 4, 6, usw.

Funktionale Notation

<An+B>

Repräsentiert Elemente, deren numerische Position in einer Serie von Geschwistern dem Muster An+B entspricht, für jeden positiven Integer oder Nullwert von n, wobei:

  • A eine ganzzahlige Schrittgröße ist,
  • B ein ganzzahliger Versatz ist,
  • n alle nichtnegativen Integer sind, beginnend bei 0.

Es kann als das An+B-te Element einer Liste gelesen werden. Sowohl A als auch B müssen <integer> Werte haben.

Die of <selector>-Syntax

Durch Übergabe eines Selektor-Arguments können wir das n-te Element auswählen, das mit diesem Selektor übereinstimmt. Zum Beispiel wählt der folgende Selektor die ersten drei Listenelemente aus, die mit class="important" versehen sind.

css
:nth-child(-n + 3 of li.important) {
}

Dies ist anders, als den Selektor außerhalb der Funktion zu verschieben, wie:

css
li.important:nth-child(-n + 3) {
}

Dieser Selektor wählt Listenelemente aus, wenn sie zu den ersten drei Kindern gehören und mit dem Selektor li.important übereinstimmen.

Beispiele

Beispiel-Selektoren

tr:nth-child(odd) oder tr:nth-child(2n+1)

Repräsentiert die ungeraden Zeilen einer HTML-Tabelle: 1, 3, 5, usw.

tr:nth-child(even) oder tr:nth-child(2n)

Repräsentiert die geraden Zeilen einer HTML-Tabelle: 2, 4, 6, usw.

:nth-child(7)

Repräsentiert das siebte Element.

:nth-child(5n)

Repräsentiert Elemente 5 [=5×1], 10 [=5×2], 15 [=5×3], usw. Das erste Element, das als Ergebnis der Formel zurückgegeben wird, ist 0 [=5×0], was zu keiner Übereinstimmung führt, da Elemente ab 1 indiziert werden, während n ab 0 beginnt. Dies mag anfangs merkwürdig erscheinen, ergibt jedoch mehr Sinn, wenn der B-Teil der Formel >0 ist, wie im nächsten Beispiel.

:nth-child(n+7)

Repräsentiert das siebte und alle nachfolgenden Elemente: 7 [=0+7], 8 [=1+7], 9 [=2+7], usw.

:nth-child(3n+4)

Repräsentiert Elemente 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], usw.

:nth-child(-n+3)

Repräsentiert die ersten drei Elemente. [=-0+3, -1+3, -2+3]

p:nth-child(n)

Repräsentiert jedes <p>-Element in einer Gruppe von Geschwistern. Dies wählt dieselben Elemente wie ein einfacher p-Selektor aus (obwohl mit einer höheren Spezifität).

p:nth-child(1) oder p:nth-child(0n+1)

Repräsentiert jedes <p>, das das erste Element in einer Gruppe von Geschwistern ist. Dies entspricht dem :first-child-Selektor (und hat dieselbe Spezifität).

p:nth-child(n+8):nth-child(-n+15)

Repräsentiert das achte bis fünfzehnte <p>-Element einer Gruppe von Geschwistern.

Detailliertes Beispiel

HTML

html
<h3>
  <code>span:nth-child(2n+1)</code>, WITHOUT an <code>&lt;em&gt;</code> among
  the child elements.
</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code>&lt;span&gt;</code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and
  <code>nth-of-type</code> only selects children of that type. The
  <code>&lt;em&gt;</code> is completely skipped over and ignored.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

css
.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: tomato;
}

Ergebnis

Verwendung von 'of <selector>'

In diesem Beispiel gibt es eine ungeordnete Liste von Namen, von denen einige mit class="noted" markiert wurden. Diese wurden mit einem dicken unteren Rahmen hervorgehoben.

HTML

html
<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>

CSS

Im folgenden CSS zielen wir auf die geraden Listenelemente ab, die mit class="noted" markiert sind.

css
li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

Ergebnis

Elemente mit class="noted" haben einen dicken unteren Rahmen, und Elemente 3, 10 und 17 haben einen durchgehenden Hintergrund, da sie die geraden Listenelemente mit class="noted" sind.

of-Selektor-Syntax vs Selektor nth-child

In diesem Beispiel gibt es zwei ungeordnete Listen von Namen. Die erste Liste zeigt die Wirkung von li:nth-child(-n + 3 of .noted) und die zweite Liste zeigt die Wirkung von li.noted:nth-child(-n + 3).

HTML

html
<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>

CSS

css
ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

Ergebnis

Im ersten Fall wird ein Stil auf die ersten drei Listenelemente mit class="noted" angewendet, unabhängig davon, ob sie die ersten drei Elemente in der Liste sind.

Im zweiten Fall wird ein Stil auf die Elemente mit class="noted" angewendet, wenn sie innerhalb der ersten drei Elemente in der Liste sind.

Verwendung des of-Selektors zur Korrektur von gestreiften Tabellen

Eine übliche Praxis für Tabellen ist die Verwendung von Zebra-Streifen, bei denen helle und dunkle Hintergrundfarben für Zeilen wechseln, um Tabellen leichter lesbar und zugänglicher zu machen. Wenn eine Zeile versteckt ist, erscheinen die Streifen zusammengeführt und beeinträchtigen den gewünschten Effekt. In diesem Beispiel können Sie zwei Tabellen mit einer versteckten Zeile sehen. Die zweite Tabelle handhabt versteckte Zeilen mit of :not([hidden]).

HTML

html
<table class="broken">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>
<table class="fixed">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>

CSS

css
.broken > tbody > tr:nth-child(even) {
  background-color: silver;
}
css
.fixed > tbody > tr:nth-child(even of :not([hidden])) {
  background-color: silver;
}

Ergebnis

In der ersten Tabelle wird nur :nth-child(even) verwendet. Die dritte Zeile hat das Attribut hidden angewendet. In diesem Fall ist die 3. Zeile nicht sichtbar und die 2. und 4. Zeilen werden als gerade gezählt, was technisch korrekt ist, aber optisch nicht.

In der zweiten Tabelle wird die of-Syntax verwendet, um nur die trs zu markieren, die nicht versteckt sind, unter Verwendung von :nth-child(even of :not([hidden])).

Styling einer Tabellenspalte

Um eine Tabellenspalte zu stylen, können Sie den Stil nicht auf das <col>-Element setzen, da Tabellenzellen keine Kinder des Elements sind (wie Sie es bei der Zeilenebene <tr> tun können). Pseudoklassen wie :nth-child() sind praktisch, um die Spaltenzellen auszuwählen.

In diesem Beispiel wenden wir unterschiedliche Stile für jede der Spalten an.

HTML

html
<table>
<caption>Student roster</caption>
<colgroup>
  <col/>
  <col/>
  <col/>
</colgroup>
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
  </tbody>
</table>

CSS

css
td {
  padding: 0.125rem 0.5rem;
  height: 3rem;
  border: 1px solid black;
}

tr :nth-child(1) {
  text-align: left;
  vertical-align: bottom;
  background-color: silver;
}

tbody tr :nth-child(2) {
  text-align: center;
  vertical-align: middle;
}

tbody tr :nth-child(3) {
  text-align: right;
  vertical-align: top;
  background-color: tomato;
}

Ergebnis

Spezifikationen

Specification
Selectors Level 4
# nth-child-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-child()
Matches elements with no parent
of <selector> syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch