Psevdo-klass nth-child

Psevdo-klass nth-child ota-onaning n-chi avlodi bo'lgan elementni tanlaydi.

Sintaksis

selector:nth-child(son | odd | even | ifoda) {
	
}

Qiymatlar

Qiymat	Tavsif
son	`1` dan boshlanadigan musbat son. Murojaat qilmoqchi bo'lgan elementning raqamini belgilaydi. Elementlarning raqamlanishi `1` dan boshlanadi.
`odd`	Toq elementlar.
`even`	Juft elementlar.
ifoda	n harfi yordamida maxsus ifodalar tuzish mumkin, bu nol (birdan emas) dan boshlab cheksizlikkacha bo'lgan barcha butun sonlarni bildiradi. Shunday qilib, `2n` - barcha juft sonlarni anglatadi (ikkinchisidan boshlab). Buni qanday tushunish kerak? `n` ga ketma-ket `0` va hokazo sonlarni qo'yamiz: agar n = 0 bo'lsa, 2n 0 ni beradi - bunday element mavjud emas (elementlarning raqamlanishi 1 dan boshlanadi), agar n = 1 bo'lsa, 2n 2 ni beradi - ikkinchi element, agar n = 2 bo'lsa, 2n 4 ni beradi - to'rtinchi element. Agar 3n yozilsa - bu har uchinchi elementni anglatadi (uchinchisidan boshlab), va hokazo.

Misol

Ushbu misolda biz ota-onasining 4-chi avlodi bo'lgan li ni qizil rangga keltiramiz:

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

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

Misol

Endi barcha juft li larni qizil qilamiz:

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

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

Misol

Endi barcha toq li larni qizil qilamiz:

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

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

Misol

Endi har uchinchi li ni qizil qilamiz (uchinchisidan boshlab):

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

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

Misol

Selectorda elementlar diapazonini ko'rsatish mumkin. Faraz qilaylik, sizda 20 ta elementdan iborat ro'yxat bor va 7 dan 14 gacha bo'lgan elementlarni (o'z ichiga olgan holda) tanlash kerak. Buni shunday amalga oshirish mumkin:

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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