CSS nth-child: Elemente gezielt auswählen, mit Beispielen

Heute geht es um die Grundlagen von CSS. In meinen Artikeln setze ich häufig die Selektoren CSS nth-child ein.

Dabei ist mir aufgefallen, dass ich die Grundlagen der CSS-Selektoren nth-child nie wirklich durchgegangen bin. nth-child ist eine CSS-Pseudoklasse zum Auswählen von Elementen.

Heute gehen wir die Möglichkeiten dieses mächtigen CSS-Selektors anhand einiger Beispiele durch.

Fangen wir mit ein paar einfachen nth-child-Selektoren an:

Wir können die Nummer des Elements angeben, das wir auswählen wollen. Sagen wir, wir wollen das dritte Element der Liste.

.article-list li:nth-child(3) {
    	color: green;
}

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Ergebnis: Nur das dritte Element ist grün

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Odd/Even-Selektor

Mit odd und even wählen wir jedes ungerade oder gerade Element aus.

.article-list-odd li:nth-child(odd) {
    	color: green;
}

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Ergebnis: Nur die ungeraden Elemente sind ausgewählt:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

und nth-child(even) für die geraden Elemente:

.article-list-even li:nth-child(even) {
    	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Jedes x-te Element

Mit dem Selektor nth-child lässt sich jedes x-te Element auswählen. Nehmen wir zum Beispiel jedes vierte Element:

... li:nth-child(4n) {
	color: red;
}

Jetzt ist jedes 4. Kindelement ausgewählt:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

... li:nth-child(4n+1) {
	color: red;
}

Und wenn wir das erste Element mitnehmen wollen:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

Oder das zweite Element:

... li:nth-child(4n+2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Die ersten x Elemente auswählen

Wir können sogar einen Selektor nutzen, der alle Tags außer den ersten drei Elementen auswählt.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Alle Elemente außer den ersten x auswählen

Wir können sogar einen Selektor nutzen, der alle Tags außer den ersten drei Elementen auswählt.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Das erste oder das letzte Element auswählen

Wir können auch das erste oder das letzte Element auswählen, mit :first-child und :last-child

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Damit können wir auch versetzt zählen und so das vorletzte Element der Liste treffen.

li:nth-last-child(2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Selektoren kombinieren

Wir können nth-child-Selektoren auch kombinieren!

Sagen wir, du willst alle geraden Elemente aus den ungeraden Listen holen.

ul:nth-child(odd) li:nth-child(even) {
	color: red;
}

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Fazit

Ich hoffe, dieser Artikel hilft dir bei der Umsetzung deiner Seiten mit der Pseudoklasse nth-child. Wenn du wissen willst, welche CSS-Pseudoklassen es sonst noch gibt, sieh dir die folgenden Artikel an:

• CSS-Pseudoklasse :not
• CSS-Pseudoklasse :where
• CSS-Pseudoklasse :empty