Псевдокласси nth-child

Псевдокласси nth-child унсуреро интихоб мекунад, ки n-уми фарзанди волидайн аст.

Синтаксис

cssинтихобкунанда: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-уми фарзанди волидайни худ аст:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Намуна

Акнун ҳамаи li-ҳои ҷуфтро сурх мекунем:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Намуна

Акнун ҳамаи li-ҳои тоқро сурх мекунем:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Намуна

Акнун ҳар li-и сеюмро (аз сеюмӣ оғоз мешавад) сурх мекунем:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

Намуна

Дар интихобкунанда метавонед диапазони унсурҳоро муайян кунед. Фарз мекунем, ки шумо рӯйхати 20 унсур доред ва ба интихоб кардани унсурҳо аз 7 то 14 аз ҷумла ниёз доред. Инро метавонед инҷониб анҷом диҳед:

html<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>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: