Pseudotrieda nth-last-child

Pseudotrieda nth-last-child vyberá element, ktorý je n-tým potomkom rodiča, počítajúc od konca. Správa sa analogicky ako nth-child, len počítanie prebieha od konca.

Syntax

cssselektor:nth-last-child(číslo | odd | even | výraz) {
  
}

Hodnoty

Hodnota	Popis
číslo	Kladné číslo začínajúce od `1`. Určuje číslo elementu, ku ktorému chceme pristúpiť. Číslovanie elementov začína od `1`.
`odd`	Nepárne elementy.
`even`	Párne elementy.
výraz	Môžeme vytvárať špeciálne výrazy s písmenom n, ktoré označuje všetky celé čísla od nuly (nie od jednotky) do nekonečna. Takže `2n` znamená všetky párne čísla (počínajúc druhým). Ako to pochopiť? Dosadzujeme do `n` postupne čísla od `0` a tak ďalej: ak n = 0, potom 2n dá 0 - taký element neexistuje (číslovanie elementov je od 1), ak n = 1, potom 2n dá 2 - druhý element, ak n = 2, 2n dá 4 - štvrtý element. Ak napíšeme 3n - to bude každý tretí element (počínajúc tretím), a tak ďalej.

Príklad

V tomto príklade urobíme červenou farbou ten li, ktorý je 4-tým od konca potomkom svojho rodiča:

html<ul>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
</ul>

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

Результат:

Príklad

Teraz červenými urobíme všetky párne od konca li:

html<ul>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
</ul>

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

Результат:

Príklad

Teraz červenými urobíme všetky nepárne od konca li:

html<ul>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
</ul>

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

Результат:

Príklad

Teraz červenými urobíme každú tretiu od konca li:

html<ul>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
  <li>položka zoznamu</li>
</ul>

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

Результат: