Pseidoklase nth-last-of-type

Pseidoklase nth-last-of-type atlasa elementu, kas ir n-tais vecāka tips norādītā tipa pēctecis, skaitot no beigām. Darbojas līdzīgi kā nth-of-type, tikai skaitīšana notiek no beigām.

Sintakse

cssselector:nth-last-of-type(skaitlis | odd | even | izteiksme) {
  
}

Vērtības

Vērtība	Apraksts
skaitlis	Pozitīvs skaitlis sākot ar `1`. Norāda elementa numuru, pie kura mēs vēlamies piekļūt. Elementu numerācija sākas ar `1`.
`odd`	Nepāra elementi.
`even`	Pāra elementi.
izteiksme	Var veidot speciālas izteiksmes ar burtu n, kas apzīmē visus veselos skaitļus no nulles (ne no viena) līdz bezgalībai. Tātad, `2n` - nozīmē visus pāra skaitļus (sākot no otrā). Kā to saprast? Aizvietojam `n` secīgi skaitļus no `0` un tālāk: ja n = 0, tad 2n dos 0 - tāda elementa nav (elementu numerācija no 1), ja n = 1, tad 2n dos 2 - otrais elements, ja n = 2, 2n dos 4 - ceturtais elements. Ja rakstītu 3n - tas būtu katrs trešais elements (sākot no trešā), un tā tālāk.

Piemērs

Atradīsim h2, kas ir 2-ais h2 vecākajā no beigām:

html<div>
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
</div>

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

Результат:

Piemērs

Atradīsim visus pāra h2 no beigām:

html<div>
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
</div>

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

Результат:

Piemērs

Atradīsim visus nepāra h2 no beigām:

html<div>
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
  
  <h2>virsraksts</h2>
  <p>rindkopa</p>
</div>

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

Результат: