Pseudoklasa nth-last-child

Pseudoklasa nth-last-child përzgjedh një element që është elementi i n-të i prindit, duke numëruar nga fundi. Sillet në mënyrë të ngjashme me nth-child, por numërimi bëhet nga fundi.

Sintaksa

përzgjedhës:nth-last-child(numër | odd | even | shprehje) {
	
}

Vlerat

Vlera	Përshkrimi
numër	Një numër pozitiv duke filluar nga `1`. Përcakton numrin e elementit tek i cili duam të referohemi. Numërimi i elementeve fillon nga `1`.
`odd`	Elementet tek.
`even`	Elementet çift.
shprehje	Mund të ndërtohen shprehje të veçanta me shkronjën n, e cila shënon të gjithë numrat e plotë nga zero (jo nga një) deri në pafundësi. Kështu, `2n` do të thotë të gjithë numrat çift (duke filluar nga i dyti). Si të kuptohet kjo? Zëvendësojmë në `n` në mënyrë të njëpasnjëshme numrat nga `0` e kështu me radhë: nëse n = 0, atëherë 2n jep 0 - nuk ka element të tillë (numërimi i elementeve nga 1), nëse n = 1, atëherë 2n jep 2 - elementi i dytë, nëse n = 2, 2n jep 4 - elementi i katërt. Nëse shkruhet 3n - ky do të jetë çdo element i tretë (duke filluar nga i treti), e kështu me radhë.

Shembull

Në këtë shembull, ne do ta bëjmë të kuqe atë li që është elementi i 4-të nga fundi i prindit të tij:

<ul>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
</ul>

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

Shembull

Tani do t'i bëjmë të kuq të gjithë elementet li çift nga fundi:

<ul>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
</ul>

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

Shembull

Tani do t'i bëjmë të kuq të gjithë elementet tek nga fundi li:

<ul>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
</ul>

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

Shembull

Tani do t'i bëjmë të kuq çdo të tretën nga fundi li:

<ul>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
	<li>element i listës</li>
</ul>

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