Pseudotrieda nth-child

Pseudotrieda nth-child vyberá element, ktorý je n-tým potomkom rodiča.

Syntax

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

Hodnoty

Hodnota	Popis
číslo	Kladné číslo začínajúce od `1`. Určuje poradie elementu, na ktorý sa chceme adresovať. Čí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 (začínajúc od druhého). 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áva 4 - štvrtý element. Ak napíšeme 3n - to bude každý tretí element (začínajúc od tretieho), a tak ďalej.

Príklad

V tomto príklade urobíme červenou farbou ten li, ktorý je 4-tym 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-child(4) {
  color: red;
}

Результат:

Príklad

Teraz urobíme červenými všetky párne 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-child(even) {
  color: red;
}

Результат:

Príklad

Teraz urobíme červenými všetky nepárne 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-child(odd) {
  color: red;
}

Результат:

Príklad

Teraz urobíme červenými každú tretiu li (začínajúc od tretej):

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-child(3n) {
  color: red;
}

Результат:

Príklad

V selektore môžeme určiť rozsah elementov. Povedzme, že máte zoznam z 20 elementov a potrebujete vybrať elementy od 7 do 14 vrátane. To sa dá urobiť takto:

html<ol>
  <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>
  <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>
  <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>
  <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>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: