Psevdo-klass nth-of-type
Psevdo-klass nth-of-type berilgan turdagi
n-chi avlod bo'lgan elementni tanlaydi.
Ya'ni, agar men h2:nth-of-type(4) deb yozsam
- ota-onada 4-chi h2 topiladi
(nth-childdan farqli o'laroq,
u faqat ota-onadagi 4-chi element bo'lgan
h2ni topadi).
Sintaksis
selector:nth-of-type(son | odd | even | ifoda){
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
| son |
1dan boshlanadigan musbat son. Murojaat qilmoqchi bo'lgan
elementning raqamini belgilaydi.
Elementlarni raqamlash 1dan boshlanadi.
|
odd |
Toq elementlar. |
even |
Juft elementlar. |
| ifoda |
Har qanday butun sonlarni nol (birdan emas)
dan cheksizlikgacha ifodalovchi n harfi bilan maxsus ifodalar tuzish mumkin.
Shunday qilib, 2n - barcha juft raqamlarni anglatadi
(ikkinchisidan boshlab).
Buni qanday tushunish kerak? n ga ketma-ket
0 va undan keyingi sonlarni 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 deb yozilsa - bu
har uchinchi elementni anglatadi (uchinchisidan boshlab), va hokazo.
|
Misol
Otasidagi 2-chi h2 bo'lgan
h2 ni topamiz:
<div>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Misol
Barcha juft h2 larni topamiz:
<div>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Misol
Barcha toq h2 larni topamiz:
<div>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
<h2>sarlavha</h2>
<p>abzas</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
