Псевдокласси 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 медиҳад - чунин унсуре нест (рақамгузории унсурҳо аз 1), агар n = 1 бошад, пас 2n 2 медиҳад - унсури дуюм, агар n = 2 бошад, 2n 4 медиҳад - унсури чорум. Агар 3n нависед - ин ҳар унсури сеюм хоҳад буд (аз сеюм оғоз карда), ва ғайра.

Намуна

h2-еро пайдо мекунем, ки 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;
}

Результат: