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

cssselektor: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:

html<div>
  <h2>naslov</h2>
  <p>pasus</p>
  
  <h2>naslov</h2>
  <p>pasus</p>
  
  <h2>naslov</h2>
  <p>pasus</p>
</div>

cssh2:nth-of-type(2) {
  color: red;
}

Результат:

Primer

Pronađimo sve parne h2:

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

cssh2:nth-of-type(even) {
  color: red;
}

Результат:

Primer

Pronađimo sve neparne h2:

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

cssh2:nth-of-type(odd) {
  color: red;
}

Результат: