Pseudoklasa nth-of-type
Pseudoklasa nth-of-type bira element,
koji je n-ti potomak zadatog tipa.
To jest, ako napišem h2:nth-of-type(4)
- naći će se 4-ti h2 u roditelju (za
razliku od nth-child,
koji će naći samo onaj h2, koji je
4-ti element u roditelju).
Sintaksa
selektor:nth-of-type(broj | odd | even | izraz){
}
Vrednosti
| Vrednost | Opis |
|---|---|
| broj |
Pozitivan broj počev od 1. Određuje redni broj elementa,
kom želimo da pristupimo.
Numeracija elemenata počinje od 1.
|
odd |
Neparni elementi. |
even |
Parni elementi. |
| izraz |
Može se sastavljati specijalne izraze sa slovom n,
koje označava sve cele brojeve od nule (ne od jedinice)
do beskonačnosti. Tako, 2n - znači sve parne
brojeve (počev od drugog).
Kako ovo razumeti? Zamenjujemo u n sukcesivno
brojeve od 0 i tako dalje: ako je n = 0, onda 2n daje 0 -
takav element ne postoji (numeracija elemenata od 1),
ako je n = 1, onda 2n daje 2 - drugi element, ako je n = 2,
2n daje 4 - četvrti element. Ako napišemo 3n - to
će biti svaki treći element (počev od trećeg), i tako dalje.
|
Primer
Pronađimo h2, koji je 2-i h2
u roditelju:
<div>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Primer
Pronađimo sve parne h2:
<div>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Primer
Pronađimo sve neparne h2:
<div>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
