Pseudoklass nth-last-child

Pseudoklass nth-last-child valib elemendi, mis on n-s vanema laps, lugedes lõpust peale. Käitub sarnaselt nth-child-ile, kuid loendamine toimub lõpust peale.

Süntaks

valija:nth-last-child(number | odd | even | avaldis) {
	
}

Väärtused

Väärtus	Kirjeldus
number	Positiivne number alates `1`. Määrab elemendi järjekorranumbri, millele me soovime viidata. Elementide nummerdamine algab `1`-st.
`odd`	Paaritud elemendid.
`even`	Paaris elemendid.
avaldis	Saab koostada spetsiaalseid avaldisi tähega n, mis tähistab kõiki täisarve nullist (mitte ühest) lõpmatuseni. Seega `2n` tähendab kõiki paaris arve (alates teisest). Kuidas seda mõista? Asendame `n`-ga järjestikku arvud alates `0` ja nii edasi: kui n = 0, siis 2n annab 0 - sellist elementi pole (elementide nummerdamine algab 1-st), kui n = 1, siis 2n annab 2 - teine element, kui n = 2, 2n annab 4 - neljas element. Kui kirjutada 3n - see tähendab iga kolmandat elementi (alates kolmandast), ja nii edasi.

Näide

Selles näites muudame punaseks selle li, mis on 4. lõpust lugedes vanema laps:

<ul>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
</ul>

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

Näide

Nüüd muudame punaseks kõik lõpust lugedes paaris li elemendid:

<ul>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
</ul>

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

Näide

Nüüd muudame punaseks kõik lõpust lugedes paaritud li elemendid:

<ul>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
</ul>

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

Näide

Nüüd muudame punaseks iga kolmanda lõpust lugedes li elemendi:

<ul>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
	<li>loendi element</li>
</ul>

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