Pseudoklasa nth-last-of-type

Pseudoklasa nth-last-of-type zgjedh një element që është elementi i n-të i prindit të një lloji të caktuar, duke numëruar nga fundi. Sillet në mënyrë të ngjashme me nth-of-type, por numërimi bëhet nga fundi.

Sintaksa

selector:nth-last-of-type(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ë përdoren shprehje të veçanta me shkronjën n, e cila përfaqëson 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 ta kuptojmë këtë? 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 fillon 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 shkruani 3n - kjo do të jetë çdo element i tretë (duke filluar nga i treti), e kështu me radhë.

Shembull

Le të gjejmë h2 që është 2-ti h2 në prind duke numëruar nga fundi:

<div>
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
</div>

h2:nth-last-of-type(2) {
	color: red;
}

Shembull

Le të gjejmë të gjithë elementët h2 çift duke numëruar nga fundi:

<div>
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
</div>

h2:nth-last-of-type(even) {
	color: red;
}

Shembull

Le të gjejmë të gjithë elementët h2 tek duke numëruar nga fundi:

<div>
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
	
	<h2>titull</h2>
	<p>paragraf</p>
</div>

h2:nth-last-of-type(odd) {
	color: red;
}