CSS :nth-child() Pseudo-Klasse
Die CSS-Pseudo-Klasse :nth-child() wählt Elemente anhand ihrer Position aus. Lesen Sie mehr und üben Sie mit Beispielen.
Die Pseudo-Klasse :nth-child() wählt Elemente anhand ihrer Position innerhalb einer Gruppe von Geschwisterelementen aus. Sie übergeben ihr eine Zahl, ein Schlüsselwort oder eine Formel, und sie wählt das passende Kind oder die passenden Kinder aus — damit lassen sich beispielsweise jede zweite Tabellenzeile, die ersten drei Listeneinträge oder beliebige Wiederholungsmuster formatieren, ohne extra Klassen im HTML hinzuzufügen.
Diese Seite erklärt die zulässigen Argumente (odd, even und die An+B-Formel), zeigt ausführbare Beispiele und klärt die häufigste Verwechslung: den Unterschied zwischen :nth-child() und :nth-of-type().
Syntax
selector:nth-child(argument) {
/* declarations */
}Das argument ist eines von drei Dingen:
- Eine einzelne Zahl, wie
:nth-child(3)— wählt das dritte Kind aus. - Ein Schlüsselwort,
oddodereven. - Eine
An+B-Formel, wie:nth-child(3n+1).
Die Zählung beginnt immer bei 1 für das erste Kind (nicht bei 0), und es werden alle Geschwisterelemente gezählt, nicht nur diejenigen, auf die Ihr Selektor-Typ passt — dieses Detail ist die Ursache der meisten Überraschungen (siehe nth-child vs. nth-of-type).
Schlüsselwortwerte
odd
Wählt Elemente an einer ungeraden Position aus (1, 3, 5, 7, …). Dies ist eine Kurzschreibweise für die Formel 2n+1.
even
Wählt Elemente an einer geraden Position aus (2, 4, 6, 8, …). Dies ist eine Kurzschreibweise für die Formel 2n.
odd und even sind die bewährten Mittel für das „Zebrastreifen"-Muster bei Tabellenzeilen oder abwechselnden Listenfarben.
Funktionale Schreibweise: An+B
Die Formel An+B wählt jedes Element aus, dessen Position sie erfüllt, wobei n die Werte 0, 1, 2, 3, … durchläuft:
Aist die Zyklusgröße (wie viele Elemente zwischen den Treffern liegen).Bist der Versatz (wo der Zyklus beginnt).
Beispiel für :nth-child(3n+1): Setzt man n = 0, 1, 2, … ein, ergeben sich die Positionen 1, 4, 7, 10, … — jedes dritte Element beginnend beim ersten.
Weitere nützliche Muster:
| Formel | Trifft Positionen | Bedeutung |
|---|---|---|
:nth-child(2n) | 2, 4, 6, … | Entspricht even |
:nth-child(2n+1) | 1, 3, 5, … | Entspricht odd |
:nth-child(3) | nur 3 | Ein einzelnes festes Element |
:nth-child(n+4) | 4, 5, 6, … | Alles ab dem 4. Element |
:nth-child(-n+3) | 1, 2, 3 | Nur die ersten drei |
A und B müssen ganze Zahlen sein. Ein negatives A zählt abwärts — so wählt -n+3 genau die ersten drei Kinder aus.
Version
Beispiele
Ein einzelnes Element auswählen
:nth-child() Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
background: #ccc;
}
</style>
</head>
<body>
<h2>:nth-child selector example</h2>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>Nur das dritte <p> erhält einen grauen Hintergrund.
Die Schlüsselwörter "odd" und "even" verwenden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Eine An+B-Formel verwenden
Dieses Beispiel verwendet :nth-child(3n), um jedes dritte Listenelement hervorzuheben:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(3n) {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>Die Elemente 3 und 6 werden hervorgehoben, da 3n die Werte 3 und 6 ergibt.
nth-child vs. nth-of-type
Dies ist die Falle, in die die meisten tappen. :nth-child() zählt alle Geschwisterelemente und prüft dann, ob das gefundene Element auch den richtigen Typ hat. Es zählt nicht „das n-te Element dieses Typs".
Betrachten Sie dieses Markup:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>Hier wählt p:nth-child(2) den ersten <p> aus — denn das <p> befindet sich an Kindposition 2 (das <h2> ist Position 1). p:nth-child(1) würde überhaupt nichts auswählen, da Position 1 die Überschrift ist, kein Absatz.
Wenn Sie „den zweiten Absatz unabhängig davon, was davor steht" meinen, verwenden Sie stattdessen :nth-of-type(), das nur Elemente desselben Typs zählt.
Verwandte Selektoren
:nth-of-type()— wie:nth-child(), zählt aber nur Geschwisterelemente desselben Typs.:nth-last-child()— gleiche Formelsyntax, zählt jedoch vom letzten Geschwisterelement rückwärts.:first-childund:last-child— Kurzschreibweisen für das erste und letzte Geschwisterelement.- CSS Selectors — Übersicht über alle Selektor-Typen.