Pseudoclasa nth-child

Pseudoclasa nth-child selectează un element, care este al n-lea descendent al părintelui său.

Sintaxă

selector:nth-child(număr | odd | even | expresie) {
	
}

Valori

Valoare	Descriere
număr	Un număr pozitiv începând cu `1`. Specifică numărul elementului căruia dorim să îi aplicăm stilurile. Numerotarea elementelor începe de la `1`.
`odd`	Elementele impare.
`even`	Elementele pare.
expresie	Pot fi construite expresii speciale cu litera n, care reprezintă toate numerele întregi de la zero (nu de la unu) până la infinit. Astfel, `2n` înseamnă toate numerele pare (începând cu al doilea). Cum înțelegem asta? Înlocuim `n` secvențial cu numere de la `0` și așa mai departe: dacă n = 0, atunci 2n dă 0 - un astfel de element nu există (numerotarea elementelor începe de la 1), dacă n = 1, atunci 2n dă 2 - al doilea element, dacă n = 2, 2n dă 4 - al patrulea element. Dacă scriem 3n - acesta va fi fiecare al treilea element (începând cu al treilea), și așa mai departe.

Exemplu

În acest exemplu, vom face culoarea roșie pentru acel li care este al 4-lea descendent al părintelui său:

<ul>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
</ul>

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

Exemplu

Acum vom face toate elementele li pare cu roșu:

<ul>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
</ul>

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

Exemplu

Acum vom face toate elementele li impare cu roșu:

<ul>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
</ul>

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

Exemplu

Acum vom face cu roșu fiecare al treilea element li (începând cu al treilea):

<ul>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
</ul>

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

Exemplu

În selector poți specifica un interval de elemente. Să presupunem că ai o listă cu 20 de elemente și trebuie să selectezi elementele de la 7 până la 14 inclusiv. Acest lucru se poate face așa:

<ol>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
	<li>element listă</li>
</ol>

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