: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 ⁨Juli 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, der :nth-child() Selektor wählt Kind-Elemente entsprechend ihrer Position unter allen Geschwisterelementen innerhalb eines Elternelements.

Probieren Sie es aus

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

<p>Track &amp; field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

Hinweis: Im element:nth-child()-Syntax wird die Kinderanzahl einschließlich aller Geschwisterkinder unabhängig vom Elementtyp gezählt; jedoch wird es nur als Übereinstimmung gewertet, wenn das Element an dieser Kinderposition mit den anderen Komponenten des Selektors übereinstimmt.

Syntax

css

:nth-child([ <An+B> | even | odd ] [of <complex-selector-list>]?) {
  /* ... */
}

Parameter

:nth-child() nimmt ein einzelnes Argument, das ein Muster zur Übereinstimmung von Elementindizes in einer Geschwisterliste beschreibt. Elementindizes beginnen bei 1.

Schlüsselwortwerte

odd: Repräsentiert Elemente, deren numerische Position in einer Geschwisterserie ungerade ist: 1, 3, 5, usw.
even: Repräsentiert Elemente, deren numerische Position in einer Geschwisterserie gerade ist: 2, 4, 6, usw.

Funktionale Notation

<An+B>

Repräsentiert Elemente, deren numerische Position in einer Geschwisterserie das Muster An+B erfüllt, für jeden positiven ganzzahligen oder null Wert von n, wobei:

A eine ganzzahlige Schrittweite ist,
B ein ganzzahliger Versatz ist,
n alle nicht-negativen Ganzzahlen sind, beginnend bei 0.

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

Die `of <selector>` Syntax

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

css

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

Dies unterscheidet sich davon, den Selektor außerhalb der Funktion zu platzieren, wie hier:

css

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

Dieser Selektor wählt Listenelemente aus, wenn sie sich unter den ersten drei Kindern befinden und dem Selektor li.important entsprechen.

Beispiele

Beispielselektoren

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 die Elemente 5 [=5×1], 10 [=5×2], 15 [=5×3], usw. Das erste Ergebnis der Formel ist 0 [=5x0], was zu keiner Übereinstimmung führt, da die Elemente ab 1 nummeriert werden, während n bei 0 beginnt. Das mag zunächst seltsam 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 die 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 Geschwistergruppe. Dies wählt dieselben Elemente aus wie ein einfacher p Selektor (jedoch 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 Geschwistergruppe ist. Dies entspricht dem :first-child Selektor (und hat dieselbe Spezifität).
p:nth-child(n+8):nth-child(-n+15): Repräsentiert die achten bis fünfzehnten <p>-Elemente einer Geschwistergruppe.

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

* {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid tomato;
  display: inline-block;
  margin-bottom: 3px;
}

css

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

Ergebnis

Nutzung von 'of <selector>'

In diesem Beispiel gibt es eine ungeordnete Liste von Namen, einige von ihnen sind als notiert markiert mit class="noted". Diese sind mit einer dicken unteren Grenze 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

* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}

Im folgenden CSS zielen wir auf die geraden Listenelemente, 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 eine dicke untere Grenze und die Elemente 3, 10 und 17 haben einen soliden 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

* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}

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

Der erste Fall wendet einen Stil auf die ersten drei Listenelemente mit class="noted" an, unabhängig davon, ob sie die ersten drei Elemente in der Liste sind oder nicht.

Der zweite Fall wendet einen Stil auf die Elemente mit class="noted" an, wenn sie sich unter den ersten 3 Elementen in der Liste befinden.

Nutzung des Selektors, um gestreifte Tabellen zu korrigieren

Eine übliche Praxis für Tabellen ist es, Zebra-Streifen zu verwenden, die zwischen hellen und dunklen Hintergründen für Zeilen wechseln, wodurch Tabellen leichter zu lesen und zugänglicher werden. Wenn eine Zeile ausgeblendet wird, scheinen die Streifen zusammengeführt zu sein und den gewünschten Effekt zu verändern. In diesem Beispiel sehen Sie zwei Tabellen mit einer hidden-Zeile. Die zweite Tabelle behandelt 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

body {
  display: flex;
  justify-content: space-around;
}
td {
  padding: 0.125rem 0.5rem;
}

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 einfach :nth-child(even) verwendet, wobei die dritte Zeile das hidden Attribut hat. In diesem Fall ist die 3. Zeile nicht sichtbar und die 2. und 4. Zeilen werden als gerade gezählt, was technisch gesehen korrekt ist, aber visuell nicht.

In der zweiten Tabelle wird die of-Syntax verwendet, um nur auf die trs zu zielen, die nicht versteckt sind, mit :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 davon sind (wie Sie es beim Zeilenelement, <tr>, tun können). Pseudoklassen wie :nth-child() sind praktisch, um die Spaltenzellen auszuwählen.

In diesem Beispiel setzen wir verschiedene Stile für jede der Spalten.

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;
}