Psevdo-klass nth-last-child

nth-last-child psevdo-klassi elementni tanlaydi, u ota-elementning oxiridan hisoblaganda n-ji avlod elementidir. nth-child kabi harakat qiladi, faqat hisob oxiridan boshlanadi.

Sintaksis

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

Qiymatlar

Qiymat	Ta'rif
son	`1` dan boshlanadigan musbat son. Murojaat qilmoqchi bo'lgan elementning raqamini belgilaydi. Elementlarni raqamlash `1` dan boshlanadi.
`odd`	Toq elementlar.
`even`	Juft elementlar.
ifoda	Harf n yordamida maxsus ifodalar tuzish mumkin, bu nol (birdan emas) dan boshlab cheksizlikkacha bo'lgan barcha butun sonlarni bildiradi. Shunday qilib, `2n` - barcha juft raqamlarni anglatadi (ikkinchisidan boshlab). Buni qanday tushunish kerak? `n` ga ketma-ket `0` va hokazo raqamlarni qo'yamiz: agar n = 0 bo'lsa, 2n 0 ni beradi - bunday element mavjud emas (elementlarni raqamlash 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 oxiridan 4-inchi avlod element 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-last-child(4) {
	color: red;
}

Misol

Endi oxiridan 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-last-child(even) {
	color: red;
}

Misol

Endi oxiridan 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-last-child(odd) {
	color: red;
}

Misol

Endi oxiridan har uchinchi li ni 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-last-child(3n) {
	color: red;
}