Pseudoklasse nth-child

De pseudoklasse nth-child selecteert een element, dat het n-de kind is van de ouder.

Syntaxis

selector:nth-child(getal | odd | even | expressie) {
	
}

Waarden

Waarde	Beschrijving
getal	Een positief getal vanaf `1`. Specificeert het nummer van het element dat we willen selecteren. De nummering van elementen begint bij `1`.
`odd`	Oneven elementen.
`even`	Even elementen.
expressie	Je kunt speciale expressies maken met de letter n, die alle gehele getallen van nul (niet van één) tot oneindig vertegenwoordigt. Dus, `2n` betekent alle even getallen (te beginnen bij de tweede). Hoe is dit te begrijpen? Vervang `n` opeenvolgend door getallen vanaf `0` en zo verder: als n = 0, dan geeft 2n 0 - zo'n element bestaat niet (nummering van elementen begint bij 1), als n = 1, dan geeft 2n 2 - het tweede element, als n = 2, geeft 2n 4 - het vierde element. Als je 3n schrijft - is dat elk derde element (te beginnen bij de derde), en zo verder.

Voorbeeld

In dit voorbeeld maken we de kleur rood voor die li, die het 4-de kind is van zijn ouder:

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

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

Voorbeeld

Nu maken we alle even li rood:

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

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

Voorbeeld

Nu maken we alle oneven li rood:

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

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

Voorbeeld

Nu maken we elke derde li rood (te beginnen bij de derde):

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

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

Voorbeeld

In de selector kun je een bereik van elementen opgeven. Stel, je hebt een lijst van 20 elementen en je moet de elementen van 7 tot en met 14 selecteren. Dit kan zo gedaan worden:

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}