Psevdorazred nth-child

Psevdorazred nth-child izbere element, ki je n-ti potomec starša.

Sintaksa

selektor:nth-child(število | odd | even | izraz) {
	
}

Vrednosti

Vrednost	Opis
število	Pozitivno število začenši z `1`. Določa zaporedno številko elementa, do katerega želimo dostopati. Številčenje elementov se začne z `1`.
`odd`	Lihi elementi.
`even`	Sodi elementi.
izraz	Lahko sestavimo posebne izraze s črko n, ki predstavlja vsa cela števila od nič (ne od ena) do neskončnosti. Tako `2n` pomeni vsa soda števila ( začenši z drugim). Kako to razumeti? Zamenjajmo v `n` zaporedno števila od `0` naprej: če je n = 0, potem 2n da 0 - takega elementa ni (številčenje elementov se začne z 1), če je n = 1, potem 2n da 2 - drugi element, če je n = 2, 2n da 4 - četrti element. Če napišemo 3n - to pomeni vsak tretji element ( začenši s tretjim), in tako naprej.

Primer

V tem primeru bomo obarvali rdeče tisti li, ki je 4.-ti potomec svojega starša:

<ul>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
</ul>

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

Primer

Zdaj bomo rdeče obarvali vse sode li:

<ul>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
</ul>

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

Primer

Zdaj bomo rdeče obarvali vse lihe li:

<ul>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
</ul>

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

Primer

Zdaj bomo rdeče obarvali vsak tretji li ( začenši s tretjim):

<ul>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
</ul>

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

Primer

V selektorju lahko določimo obseg elementov. Recimo, da imate seznam 20 elementov in morate izbrati elemente od 7 do 14 vključno. To lahko storite takole:

<ol>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
	<li>element seznama</li>
</ol>

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