Pseudoclasa nth-last-child

Pseudoclasa nth-last-child selectează un element care este al n-lea descendent al părintelui, numărând de la sfârșit. Se comportă similar cu nth-child, doar că numărătoarea se face de la sfârșit.

Sintaxă

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

Valori

Valoare	Descriere
număr	Număr pozitiv începând cu `1`. Specifică numărul elementului către care dorim să ne referim. Numerotarea elementelor începe de la `1`.
`odd`	Elementele impare.
`even`	Elementele pare.
expresie	Pot fi compuse 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 să înțelegem asta? Înlocuim în `n` succesiv 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 acel li care este al 4-lea de la sfârșit 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-last-child(4) {
	color: red;
}

Exemplu

Acum vom face roșii toate elementele pare de la sfârșit li:

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

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

Exemplu

Acum vom face roșii toate elementele impare de la sfârșit li:

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

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

Exemplu

Acum vom face roșii fiecare al treilea element de la sfârșit li:

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

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