: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.
:nth-child(<nth> [of <complex-selector-list>]?) {
/* ... */
}
Schlüsselwortwerte
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 vonn
, 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. SowohlA
als auchB
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.
:nth-child(-n + 3 of li.important) {
}
Dies ist anders, als den Selektor außerhalb der Funktion zu verschieben, wie:
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)
odertr:nth-child(2n+1)
-
Repräsentiert die ungeraden Zeilen einer HTML-Tabelle: 1, 3, 5, usw.
tr:nth-child(even)
odertr: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 derB
-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 einfacherp
-Selektor aus (obwohl mit einer höheren Spezifität). p:nth-child(1)
oderp: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
<h3>
<code>span:nth-child(2n+1)</code>, WITHOUT an <code><em></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><em></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><span></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><em></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><em></code>, not a <code><span></code>, and
<code>nth-of-type</code> only selects children of that type. The
<code><em></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
.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
<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.
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
<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
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
<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
.broken > tbody > tr:nth-child(even) {
background-color: silver;
}
.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 tr
s 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
<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
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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
:nth-of-type()
:nth-last-child()
:has()
: Pseudoklasse zum Auswählen eines Elternelements- Baumstruktur-Pseudoklassen
- CSS-Selektoren-Modul