De CSS-selector nth-child: praktische introductie met voorbeelden

Vandaag halen we een paar CSS-basics op. Ik grijp in mijn artikelen vaak naar de CSS nth-child selectors.

Daardoor besefte ik dat ik de basis van de css nth-child-selectors nooit echt heb behandeld. nth-child is een CSS-pseudoklasse waarmee je elementen kunt selecteren.

Vandaag verkennen we aan de hand van een paar voorbeelden wat deze krachtige CSS-selector allemaal kan.

We beginnen met een paar eenvoudige css nth-child selectors:

We kunnen het nummer opgeven van het element dat we willen selecteren. Stel dat we het derde item in de lijst willen pakken.

css

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

html

<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>

Het resultaat is dat alleen het derde item groen is

Item 1
Item 2
Item 3
Item 4
Item 5

De odd/even-selector

Met odd en even kunnen we alle even of alle oneven elementnummers selecteren.

css

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

html

<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>

Het resultaat is dat alleen de oneven items zijn geselecteerd:

Item 1
Item 2
Item 3
Item 4
Item 5

en nth-child(even) voor de even resultaten:

css

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

Item 1
Item 2
Item 3
Item 4
Item 5

Elk X-de element

Wat we met de selector nth-child, ook kunnen doen, is elk x-de element selecteren. Stel bijvoorbeeld dat we elk vierde element willen pakken:

css

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

Nu is elk vierde kindelement geselecteerd:

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

css

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

En als we het eerste element mee willen nemen:

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

Of het tweede element:

css

... 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

De eerste x elementen selecteren

We kunnen zelfs een selector gebruiken die alle tags pakt behalve de eerste drie elementen.

css

... 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 elementen behalve de eerste x selecteren

We kunnen zelfs een selector gebruiken die alle tags pakt behalve de eerste drie elementen.

css

... 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

Het eerste of het laatste element selecteren

We kunnen ook het eerste of het laatste element pakken met:first-child en :last-child

css

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

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Daarmee kunnen we ook een offset toepassen om het op één na laatste element van de lijst te krijgen.

css

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

Item 1
Item 2
Item 3
Item 4
Item 5

Selectors combineren

We kunnen nth-child-selectors ook combineren!

Stel dat je alle even getallen uit een lijst met oneven getallen wilt halen.

css

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

html

<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>

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Conclusie

Ik hoop dat dit artikel je helpt bij het bouwen van je sites met de pseudoklasse nth-child. Wil je zien welke andere css-pseudoklassen er bestaan, kijk dan naar de volgende artikelen:

CSS