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

Псевдокласс nth-last-child родидан oxирига қараб ҳисобланган n-чи фарзанд элементни танлайди. nth-child каби ҳаракат қилади, фақат ҳисоб oxиридан бошланади.

Синтаксис

cssселектор:nth-last-child(сон | odd | even | ифода) {
  
}

Қийматлар

Қиймат	Тасниф
сон	`1` дан бошланган мусбат сон. Мурожаат қилмоқчи бўлган элементнинг рақамини белгилайди. Элементларнинг рақамлаштириши `1` дан бошланади.
`odd`	Тоқ рақамли элементлар.
`even`	Жуфт рақамли элементлар.
ифода	Барча бутун сонларни (бирликдан эмас, нолдан) чексизликкача белгиловчи n ҳарфи билан махсус ифодалар тузиш мумкин. Шу тариқа, `2n` - демак барча жуфт сонлар (иккинчидан бошлаб). Буни қандай тушуниш керак? `n` га `0` дан бошлаб кетма-кет сонларни қўйамиз: агар n = 0 бўлса, 2n 0 ни берadi - бундай элемент йўқ (элементларнинг рақамлаштириши 1 дан бошланади), агар n = 1 бўлса, 2n 2 ни беради - иккинчи элемент, агар n = 2 бўлса, 2n 4 ни беради - тўртинчи элемент. Агар 3n деб ёзилса - бу ҳар учинчи элемент (учинчидан бошлаб), ва ҳоказо.

Мисол

Бу мисолда биз li ни қизил рангга киритамиз, яъни унинг родидан oxирига қараб 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-last-child(4) {
  color: red;
}

Результат:

Мисол

Ҳозир биз oxиридан ҳисобланган барча жуфт 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-last-child(even) {
  color: red;
}

Результат:

Мисол

Ҳозир биз oxиридан ҳисобланган барча тоқ 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-last-child(odd) {
  color: red;
}

Результат:

Мисол

Ҳозир биз oxиридан ҳисобланган ҳар учинчи 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-last-child(3n) {
  color: red;
}

Результат: