Pseudoklasa nth-of-type

Pseudoklasa nth-of-type zgjedh një element, që është elementi i n-të i një lloji të caktuar.

Kjo do të thotë, nëse unë shkruaj h2:nth-of-type(4) - do të gjendet 4-ti h2 në prind (ndryshe nga nth-child, që gjen vetëm atë h2 që është elementi i 4-të në prind).

Sintaksa

selector:nth-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 të cilit duam t'i referohemi. Numërimi i elementeve fillon nga `1`.
`odd`	Elementet tek.
`even`	Elementet çift.
shprehje	Mund të formohen 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 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 shkruhet 3n - kjo do të thotë çdo element i tretë (duke filluar nga i treti), e kështu me radhë.

Shembull

Le të gjejmë h2 që është h2-i i 2-të në prind:

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

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

Shembull

Le të gjejmë të gjithë h2-të çift:

<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>
</div>

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

Shembull

Le të gjejmë të gjithë h2-të tek:

<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>
</div>

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