: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.
Die :nth-child()
CSS Pseudoklasse wählt Elemente basierend auf den Indizes der Elemente in der Kind-Liste ihrer Eltern aus. Mit anderen Worten, der :nth-child()
-Selektor wählt Kindelemente entsprechend ihrer Position unter allen Geschwisterelementen innerhalb eines Elternelements aus.
Probieren Sie es aus
Hinweis: Im element:nth-child()
-Syntax wird die Anzahl der Kinder einschließlich der Geschwisterkinder aller Elementtypen gezählt; es gilt jedoch nur als Übereinstimmung, wenn das Element an dieser Kinderposition auch die anderen Komponenten des Selektors erfüllt.
Syntax
:nth-child()
nimmt ein einzelnes Argument, das ein Muster zur Ü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 Reihe von Geschwistern dem Muster
An+B
entspricht, für jeden positiven ganzzahligen oder null Wert vonn
, wobei:A
ein ganzzahliger Schrittwert ist,B
ein ganzzahliger Offset ist,n
alle nichtnegativen Ganzzahlen sind, beginnend ab 0.
Es kann als das
An+B
-te Element einer Liste gelesen werden. DieA
undB
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 dem Selektor entspricht. Zum Beispiel wählt der folgende Selektor die ersten drei Listenelemente aus, die ein class="important"
gesetzt haben.
:nth-child(-n + 3 of li.important) {
}
Dies unterscheidet sich davon, den Selektor außerhalb der Funktion zu bewegen, wie:
li.important:nth-child(-n + 3) {
}
Dieser Selektor wählt Listenelemente aus, wenn sie unter den ersten drei Kindern sind und dem Selektor li.important
entsprechen.
Beispiele
Beispielselektoren
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 die Elemente 5 [=5×1], 10 [=5×2], 15 [=5×3], usw. Das erste durch die Formel zurückgegebene Ergebnis ist 0 [=5x0], was zu keiner Übereinstimmung führt, da die Elemente ab 1 indiziert sind, während
n
ab 0 beginnt. Dies mag zunächst 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 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 Gruppe von Geschwistern. Dieser Selektor wählt dieselben Elemente wie ein einfacherp
-Selektor (obwohl mit höherer 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 ist dasselbe wie der: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, einige davon wurden als notiert mit class="noted"
markiert. Diese wurden mit einem dicken unteren Rand 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
In dem folgenden CSS richten wir uns an die geraden Listenelemente, 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 Rand und die Elemente 3, 10 und 17 haben einen durchgehenden Hintergrund, da sie die geraden Listenelemente mit class="noted"
sind.
of-Selektor-Syntax vs. nth-child-Selektor
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 diese die ersten drei Elemente in der Liste sind.
Im zweiten Fall wird ein Stil auf die Elemente mit class="noted"
angewendet, wenn sie sich innerhalb der ersten 3 Elemente in der Liste befinden.
Verwendung des of-Selektors zur Korrektur von gestreiften Tabellen
Eine übliche Praxis für Tabellen ist die Verwendung von Zebrastreifen, bei denen zwischen hellen und dunklen Hintergrundfarben für Zeilen gewechselt wird, um Tabellen leichter lesbar und zugänglicher zu machen. Wenn eine Zeile ausgeblendet ist, erscheinen die Streifen zusammengefügt und ändern den gewünschten Effekt. In diesem Beispiel sehen Sie zwei Tabellen mit einer ausgeblendeten Zeile. Bei der zweiten Tabelle werden ausgeblendete Zeilen mit of :not([hidden])
behandelt.
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 hidden
-Attribut. In diesem Fall ist die 3. Zeile nicht sichtbar und die 2. & 4. Zeilen werden als gerade gezählt, was sie technisch sind, aber visuell nicht sind.
In der zweiten Tabelle wird die of-Syntax verwendet, um nur die tr
s anzusprechen, die nicht ausgeblendet sind, indem :nth-child(even of :not([hidden]))
verwendet wird.
Stylen einer Tabellenspalte
Um eine Tabellenspalte zu stylen, können Sie den Stil nicht auf das <col>
-Element setzen, da Tabellenspalten keine Kinder davon sind (wie Sie es mit dem Zeilenelement, <tr>
, tun können). Pseudoklassen wie :nth-child()
sind nützlich, 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
BCD tables only load in the browser
Siehe auch
:nth-of-type()
:nth-last-child()
:has()
: Pseudoklasse zur Auswahl eines übergeordneten Elements- Baumstrukturelle Pseudoklassen
- CSS-Selektoren Modul