: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 Pseudo-Klasse wählt Elemente basierend auf den Indizes der Elemente in der Kinderliste ihrer Eltern aus. Mit anderen Worten, der :nth-child()
-Selektor wählt Kind-Elemente entsprechend ihrer Position unter allen Geschwisterelementen innerhalb eines Elternelements aus.
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 & 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:
In der Syntax element:nth-child()
umfasst die Kinderzählung Geschwisterkinder jedes Elementtyps; es wird jedoch nur dann als Übereinstimmung betrachtet, wenn das Element an dieser Kinderposition den anderen Komponenten des Selektors entspricht.
Syntax
:nth-child()
nimmt ein einzelnes Argument, das ein Muster zur Übereinstimmung von Elementindizes in einer Liste von Geschwistern beschreibt. Die 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 ganzzahligen oder nullwertigen Wert vonn
, wobei:A
eine ganzzahlige Schrittgröße ist,B
ein ganzzahliger Versatz ist,n
alle nicht-negativen ganzen Zahlen ab 0 sind.
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 das Übergeben eines Selektor-Arguments können wir das nte Element auswählen, das diesem Selektor entspricht. Zum Beispiel entspricht der folgende Selektor den ersten drei Listenelementen, die class="important"
gesetzt haben.
:nth-child(-n + 3 of li.important) {
}
Dies ist anders, als den Selektor außerhalb der Funktion zu platzieren, wie:
li.important:nth-child(-n + 3) {
}
Dieser Selektor wählt Listenelemente aus, wenn sie zu den ersten drei Kindern gehören und dem Selektor li.important
entsprechen.
Beispiele
Beispielsselektoren
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 Ergebnis der Formel ist 0 [=5x0], was zu keiner Übereinstimmung führt, da die Elemente von 1 indexiert werden, wohingegen
n
bei 0 beginnt. Dies mag auf den ersten Blick seltsam erscheinen, aber es macht mehr Sinn, wenn derB
-Teil der Formel>0
ist, wie im nächsten Beispiel. :nth-child(n+7)
-
Repräsentiert das siebte und alle folgenden 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 aus wie ein einfacherp
-Selektor (jedoch 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 die achten bis fünfzehnten
<p>
-Elemente 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, einige davon wurden als noted gekennzeichnet mittels class="noted"
. Diese wurden mit einer dicken unteren Grenze 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 eine dicke untere Grenze und die Elemente 3, 10 und 17 haben einen festen Hintergrund, da sie die geraden Listenelemente mit class="noted"
sind.
'of selector' Syntax vs 'selector nth-child'
In diesem Beispiel gibt es zwei ungeordnete Listen von Namen. Die erste Liste zeigt den Effekt von li:nth-child(-n + 3 of .noted)
und die zweite Liste zeigt den Effekt 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"
angewandt, 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"
angewandt, wenn sie zu den ersten 3 Elementen in der Liste gehören.
Verwendung des 'of selector' zur Korrektur gestreifter Tabellen
Eine gängige Praxis für Tabellen ist die Verwendung von Zebra-Streifen, die zwischen hellen und dunklen Hintergrundfarben für Zeilen wechseln, um Tabellen leichter lesbar und zugänglicher zu machen. Wenn eine Zeile ausgeblendet ist, scheinen sich die Streifen zu verbinden und den gewünschten Effekt zu verzerren. In diesem Beispiel können Sie zwei Tabellen mit einer hidden
-Zeile sehen. Die zweite Tabelle behandelt ausgeblendete 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 einfach :nth-child(even)
verwendet, wobei auf die dritte Zeile das Attribut hidden
angewandt wurde. In diesem Fall ist die 3. Zeile nicht sichtbar, und die 2. & 4. Zeilen werden als gerade gezählt, was technisch zwar korrekt ist, visuell jedoch nicht.
In der zweiten Tabelle wird die of syntax verwendet, um nur die tr
s anzusprechen, die nicht ausgeblendet sind, mit :nth-child(even of :not([hidden]))
.
Stil einer Tabellenspalte
Um einer Tabellenspalte einen Stil zu verleihen, können Sie den Stil nicht auf das <col>
-Element setzen, da Tabellenzellen keine Kinder davon sind (wie Sie es mit dem Zeilenelement tun können, <tr>
). Pseudo-Klassen wie :nth-child()
sind praktisch, um die Spaltenzellen auszuwählen.
In diesem Beispiel setzen wir unterschiedliche Stile für jede der Spalten.
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
Siehe auch
:nth-of-type()
:nth-last-child()
:has()
: Pseudo-Klasse zum Auswählen des Elternelements- Baum-strukturelle Pseudo-Klassen
- CSS-Selektoren Modul