Pseudotrieda nth-of-type
Pseudotrieda nth-of-type vyberá element,
ktorý je n-tým potomkom daného typu.
To znamená, že ak napíšem h2:nth-of-type(4)
- nájde sa 4-ty h2 v rodičovi (na rozdiel od nth-child,
ktorý nájde len ten h2, ktorý je
4-tym elementom v rodičovi).
Syntax
selektor:nth-of-type(číslo | odd | even | výraz){
}
Hodnoty
| Hodnota | Popis |
|---|---|
| číslo |
Kladné číslo začínajúce od 1. Určuje číslo elementu,
ku ktorému sa chceme dostať.
Číslovanie elementov začína od 1.
|
odd |
Nepárne elementy. |
even |
Párne elementy. |
| výraz |
Môžeme vytvoriť š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čína 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 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čína od tretieho), a tak ďalej.
|
Príklad
Nájdeme h2, ktorý je 2-ym h2
v rodičovi:
<div>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Príklad
Nájdeme všetky párne h2:
<div>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Príklad
Nájdeme všetky nepárne h2:
<div>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
<h2>nadpis</h2>
<p>odsek</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
: