Псевдокласси 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>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Намуна
Акнун ҳамаи li-ҳои ҷуфтро сурх мекунем:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Намуна
Акнун ҳамаи li-ҳои тоқро сурх мекунем:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Намуна
Акнун ҳар li-и сеюмро
(аз сеюмӣ оғоз мешавад) сурх мекунем:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Намуна
Дар интихобкунанда метавонед диапазони унсурҳоро муайян кунед.
Фарз мекунем, ки шумо рӯйхати 20
унсур доред ва ба интихоб кардани унсурҳо аз 7
то 14 аз ҷумла ниёз доред. Инро метавонед
инҷониб анҷом диҳед:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
