Psevdorazred nth-of-type

Psevdorazred nth-of-type izbere element, ki je n-ti potomec določenega tipa.

To pomeni, če napišem h2:nth-of-type(4) - bo najden 4-ti h2 v starševskem elementu (za razliko od nth-child, ki bo našel le tisti h2, ki je 4-ti element v starševskem elementu).

Sintaksa

cssizbiralec:nth-of-type(število | odd | even | izraz){

}

Vrednosti

Vrednost	Opis
število	Pozitivno število začenši z `1`. Določa številko elementa, do katerega želimo dostopati. Številčenje elementov se začne z `1`.
`odd`	Lihi elementi.
`even`	Sodi elementi.
izraz	Lahko sestavite posebne izraze s črko n, ki predstavlja vsa cela števila od nič (ne od ena) do neskončnosti. Tako `2n` pomeni vsa soda števila ( začenši z drugim). Kako to razumeti? Zamenjajte v `n` zaporedno števila od `0` naprej: če je n = 0, potem 2n da 0 - takega elementa ni (številčenje elementov je od 1), če je n = 1, potem 2n da 2 - drugi element, če je n = 2, 2n da 4 - četrti element. Če napišete 3n - to bo vsak tretji element ( začenši s tretjim), in tako naprej.

Primer

Poiščimo h2, ki je 2-ti h2 v starševskem elementu:

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

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

Результат:

Primer

Poiščimo vse sode h2:

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

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

Результат:

Primer

Poiščimo vse lihe h2:

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

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

Результат: