Pseudotřída nth-child

Pseudotřída nth-child vybírá prvek, který je n-tým potomkem rodiče.

Syntaxe

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

Hodnoty

Hodnota	Popis
číslo	Kladné číslo začínající od `1`. Určuje pořadí prvku, na který chceme aplikovat styly. Číslování prvků začíná od `1`.
`odd`	Liché prvky.
`even`	Sudé prvky.
výraz	Lze vytvářet speciální výrazy s písmenem n, které představuje všechna celá čísla od nuly (ne od jedné) do nekonečna. Takže `2n` znamená všechna sudá čísla (počínaje druhým). Jak to pochopit? Dosazujeme za `n` postupně čísla od `0` a dále: pokud n = 0, pak 2n dá 0 - takový prvek neexistuje (číslování prvků je od 1), pokud n = 1, pak 2n dá 2 - druhý prvek, pokud n = 2, 2n dá 4 - čtvrtý prvek. Pokud napíšeme 3n - bude to každý třetí prvek (počínaje třetím), a tak dále.

Příklad

V tomto příkladu nastavíme červenou barvu tomu li, který je 4.-tým potomkem svého rodiče:

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

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

Результат:

Příklad

Nyní nastavíme červenou barvu všem sudým li:

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

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

Результат:

Příklad

Nyní nastavíme červenou barvu všem lichým li:

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

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

Результат:

Příklad

Nyní nastavíme červenou barvu každé třetí li (počínaje třetí):

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

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

Результат:

Příklad

V selektoru lze určit rozsah prvků. Předpokládejme, že máte seznam 20 prvků a potřebujete vybrat prvky od 7 do 14 včetně. To lze provést takto:

html<ol>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ol>

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

Результат: