Псевдокласс nth-of-type
Псевдокласс nth-of-type белгиланган турдаги
n-чи турдош бўлган элементни танлайди.
Яъни, агар мен h2:nth-of-type(4) деб ёзсам
- она элементдаги 4-чи h2 топилади (она элементдаги
4-чи элемент бўлган h2нигина топадиган
nth-childдан
фарқли ўлароқ).
Синтаксис
cssселектор:nth-of-type(сон | odd | even | ифода){
}
Қийматлар
| Қиймат | Тасниф |
|---|---|
| сон |
1дан бошланган мусбат сон. У мурожаат қилмоқчи бўлган
элементнинг рақамини белгилайди.
Элементларнинг рақамланиши 1дан бошланади.
|
odd |
Тоқ рақамли элементлар. |
even |
Жуфт рақамли элементлар. |
| ифода |
Ҳарф n билан махсус ифодалар тузиш мумкин, бу n нолдан (бирдан эмас)
бошлаб чексизликкача бўлган барча бутун сонларни билдиради.
Шунга кўра, 2n - демак барча жуфт сонлар (иккинчидан бошлаб).
Буни қандай тушуниш керак? n га 0 ва бошқа сонларни
навбат билан қўйамиз: агар n = 0 бўлса, 2n 0 ни берadi -
бундай элемент йўқ (элементларнинг рақамланиши 1 дан бошланади),
агар n = 1 бўлса, 2n 2 ни беради - иккинчи элемент, агар n = 2 бўлса,
2n 4 ни беради - тўртинчи элемент. Агар 3n деб ёзилса - бу
ҳар учинчи элемент бўлади (учинчидан бошлаб), ва ҳоказо.
|
Мисол
Она элементдаги 2-чи h2 ни топамиз:
html<div>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
Мисол
Барча жуфт h2 ларни топамиз:
html<div>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
Мисол
Барча тоқ h2 ларни топамиз:
html<div>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
<h2>сарлавҳа</h2>
<p>абзац</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: