Pseudoklasa nth-child

Pseudoklasa nth-child zgjedh një element, që është elementi i n-të i prindit.

Sintaksa

selector:nth-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 të cilit duam t'i referohemi. Numërimi i elementeve fillon nga `1`.
`odd`	Elementet tek.
`even`	Elementet çift.
shprehje	Mund të krijoni 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 mund 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 do të japë 0 - nuk ka element të tillë (numërimi i elementeve fillon nga 1), nëse n = 1, atëherë 2n do të japë 2 - elementi i dytë, nëse n = 2, 2n jep 4 - elementi i katërt. Nëse shkruani 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 li-n që është elementi i 4-të i prindit të vet:

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

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

Shembull

Tani do t'i bëjmë të kuqe të gjitha li-t çift:

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

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

Shembull

Tani do t'i bëjmë të kuqe të gjitha li-t tek:

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

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

Shembull

Tani do t'i bëjmë të kuqe çdo li të tretë (duke filluar nga i treti):

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

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

Shembull

Në selektor mund të përcaktoni një varg elementësh. Le të themi, keni një listë me 20 elementë dhe duhet të zgjidhni elementet nga 7 në 14 përfshirë. Kjo mund të bëhet kështu:

<ol>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
	<li>element listë</li>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}