nth-of-type жалган классы
nth-of-type жалган класстыры белгилүү типтеги n-баласы болгон элементти тандайт.
Башкача айтканда, мен h2:nth-of-type(4) деп жазсам
- ата-энедеги (parent) 4-h2 табылат (nth-childтен айырмаланып,
ал ата-энедеги 4-бала болгон h2 гана табат).
Синтаксис
тандоочу:nth-of-type(сан | odd | even | туюнтма){
}
Маанилери
| Маани | Сүрөттөмө |
|---|---|
| сан |
1 башталган оң сан. Биз кайрылгыбыз келген элементтин номерин көрсөтөт.
Элементтердин номери 1 башталат.
|
odd |
Так элементтер. |
even |
Жуп элементтер. |
| туюнтма |
Бардык бүтүн сандарды (бирден эмес, нөлдөн) чексиздикке чейин билдирген n тамгасы менен атайын туюнтмалар түзсө болот. Ошентип, 2n - бардык жуп сандарды билдирет (экинчиден баштап).
Муну кантип түшүнүү керек? nга ырааттуу түрдө 0 жана андан ары сандарды коёбуз: эгер n = 0 болсо, анда 2n 0 берет - мындай элемент жок (элементтердин номери 1ден башталат),
эгер n = 1 болсо, анда 2n 2 берет - экинчи элемент, эгер n = 2 болсо, 2n 4 берет - төртүнчү элемент. Эгер 3n деп жазсак - бул ар биринчи үчүнчү элемент болот (үчүнчүдөн баштап), жана ушу сыяктуу.
|
Мисал
Ата-энедеги 2-h2 болгон h2 табабыз:
<div>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Мисал
Бардык жуп h2 табабыз:
<div>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Мисал
Бардык так h2 табабыз:
<div>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
<h2>аталыш</h2>
<p>абзац</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
