Pseudo-klasa nth-child

Pseudo-klasa nth-child bira element, koji je n-ti potomak svog roditelja.

Sintaksa

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

Vrednosti

Vrednost	Opis
broj	Pozitivan broj počev od `1`. Određuje redni broj elementa kome želimo da pristupimo. Numeracija elemenata počinje od `1`.
`odd`	Neparni elementi.
`even`	Parni elementi.
izraz	Mogu se kreirati specijalni izrazi sa slovom n, koje označava sve cele brojeve od nule (ne od jedinice) do beskonačnosti. Tako, `2n` znači svi parni brojevi (počev od drugog). Kako ovo razumeti? Zamenjujemo u `n` sukcesivno brojeve od `0` i dalje: ako je n = 0, onda 2n daje 0 - takav element ne postoji (numeracija elemenata počinje od 1), ako je n = 1, onda 2n daje 2 - drugi element, ako je n = 2, 2n daje 4 - četvrti element. Ako napišemo 3n - to će biti svaki treći element (počev od trećeg), i tako dalje.

Primer

U ovom primeru ćemo učiniti crvene boje onaj li element, koji je 4-ti potomak svog roditelja:

<ul>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
</ul>

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

Primer

Sada ćemo učiniti crvenim sve parne li elemente:

<ul>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
</ul>

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

Primer

Sada ćemo učiniti crvenim sve neparne li elemente:

<ul>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
</ul>

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

Primer

Sada ćemo učiniti crvenim svaki treći li element (počev od trećeg):

<ul>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
</ul>

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

Primer

U selektoru se može odrediti opseg elemenata. Recimo, imate listu od 20 elemenata i treba da izaberete elemente od 7 do 14 uključujući. To se može uraditi ovako:

<ol>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
	<li>stavka liste</li>
</ol>

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