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

Псевдокласс nth-last-of-type родиданги берилган турдаги натиралар ичидан охиридан хисоблаб n-чи натирани танлайди. nth-of-type каби ишлейди, факат охиридан хисоблайди.

Синтаксис

cssселектор:nth-last-of-type(сон | 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 деб ёзилса - бу ҳар учинчи элемент (учинчидан бошлаб), ва ҳоказо.

Мисол

Охиридан хисоблаб, родидаги 2-чи h2 ни топамиз:

html<div>
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
</div>

cssh2:nth-last-of-type(2) {
  color: red;
}

Результат:

Мисол

Охиридан бошлаб барча жуфт h2 ларни топамиз:

html<div>
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
</div>

cssh2:nth-last-of-type(even) {
  color: red;
}

Результат:

Мисол

Охиридан бошлаб барча тоқ h2 ларни топамиз:

html<div>
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
  
  <h2>сарлавҳа</h2>
  <p>абзац</p>
</div>

cssh2:nth-last-of-type(odd) {
  color: red;
}

Результат: