nth-child жасалма-классы
nth-child жасалма-классы элементти тандайт,
ал ата-энесинин n-чи тукуму болуп саналат.
Синтаксис
тандоочу:nth-child(сан | odd | even | туюнтма) {
}
Маанилери
| Маани | Сүрөттөө |
|---|---|
| сан |
1дөн башталган оң сан.
Биз кайрылгыбыз келген элементтин номерин
берилет. Элементтердин номери 1дөн башталат.
|
odd |
Так сандуу элементтер. |
even |
Жуп сандуу элементтер. |
| туюнтма |
n тамгасы менен атайын туюнтмаларды түзсө болот,
ал нөлдөн (бирден эмес) чексиздикке чейинки
бардык бүтүн сандарды билдирет. Ошентип, 2n - бардык жуп
сандарды билдирет (экинчиден баштап).
Муну кантип түшүнүү керек? nге ырааттуу түрдө
0 жана андан ары сандарды коёбуз: эгер n = 0 болсо, анда 2n 0 берет -
мындай элемент жок (элементтердин номери 1ден башталат),
эгер n = 1 болсо, анда 2n 2 берет - экинчи элемент, эгер n = 2 болсо,
2n 4 берет - төртүнчү элемент. Эгер 3n деп жазылса - бул
ар бир үчүнчү элемент (үчүнчүдөн баштап), ж.б.у.с.
|
Мисал
Бул мисалда биз кызыл түстү
li элементинде көрсөтөбүз, ал өзүнүн ата-энесинин
4-чү тукуму болуп саналат:
<ul>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Мисал
Азыр бардык жуп сандуу li элементтерин кызыл кылабыз:
<ul>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Мисал
Азыр бардык так сандуу li элементтерин кызыл кылабыз:
<ul>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Мисал
Азыр ар бир үчүнчү
li элементин (үчүнчүдөн баштап) кызыл кылабыз:
<ul>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Мисал
Тандоочунда элементтердин диапазонун көрсөтсө болот.
Демек, сизде 20 элементтен турган тизме бар
жана 7дөн 14чү элементтерге чейинкилерди тандоо керек.
Муну төмөнкүдөй жасаса болот:
<ol>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
<li>тизме элементи</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
