Pseudoklasas nth-last-child

Pseudoklasas nth-last-child pasirenka elementą, kuris yra n-tasis tėvo palikuonis, skaičiuojant nuo galo. Elgiasi panašiai kaip nth-child, tik skaičiavimas vyksta nuo galo.

Sintaksė

selektorius:nth-last-child(skaičius | odd | even | išraiška) {
	
}

Reikšmės

Reikšmė	Aprašas
skaičius	Teigiamas skaičius nuo `1`. Nurodo elemento, prie kurio norime kreiptis, numerį. Elementų numeracija prasideda nuo `1`.
`odd`	Nelyginiai elementai.
`even`	Lyginiai elementai.
išraiška	Galima sudaryti specialias išraiškas su raide n, kuri žymi visus sveikuosius skaičius nuo nulio (ne nuo vieneto) iki begalybės. Taigi, `2n` - reiškia visus lyginius skaičius (pradedant antruoju). Kaip tai suprasti? Į `n` paeiliui įstatome skaičius nuo `0` ir toliau: jei n = 0, tai 2n duos 0 - tokio elemento nėra (elementų numeracija nuo 1), jei n = 1, tai 2n duos 2 - antrasis elementas, jei n = 2, 2n duoda 4 - ketvirtasis elementas. Jei rašoma 3n - tai bus kas trečias elementas (pradedant trečiuoju), ir taip toliau.

Pavyzdys

Šiame pavyzdyje padarysime raudonos spalvos tą li, kuris yra 4-tas nuo galo palikuonis savo tėvo:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Dabar raudonais padarysime visus lyginius nuo galo li:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Dabar raudonais padarysime visus nelyginius nuo galo li:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Dabar raudonais padarysime kas trečią nuo galo li:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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