Pseudoklasas nth-of-type

Pseudoklasas nth-of-type pasirenka elementą, kuris yra n-tasis nurodyto tipo įpėdinis.

Tai yra, jei aš parašysiu h2:nth-of-type(4) - bus rastas 4-tas h2 tėviniame elemente (priešingai nei nth-child, kuris ras tik tą h2, kuris yra 4-tas elementas tėviniame elemente).

Sintaksė

cssselektorius:nth-of-type(skaičius | odd | even | išraiška){

}

Reikšmės

Reikšmė	Aprašas
skaičius	Teigiamas skaičius pradedant nuo `1`. Nurodo elemento numerį, į kurį norime kreiptis. Elementų numeracija prasideda nuo `1`.
`odd`	Nelyginiai elementai.
`even`	Lyginiai elementai.
išraiška	Galima sudaryti specialias išraiškas su raide n, kuri žymi visus sveikuosius skaičius nuo nulio (ne nuo vieneto) iki begalybės. Taigi, `2n` - reiškia visus lyginius skaičius (pradedant nuo antrojo). Kaip tai suprasti? Į `n` paeiliui įstatome skaičius nuo `0` ir toliau: jei n = 0, tai 2n duos 0 - tokio elemento nėra (elementų numeracija nuo 1), jei n = 1, tai 2n duos 2 - antrasis elementas, jei n = 2, 2n duoda 4 - ketvirtasis elementas. Jei parašytume 3n - tai bus kas trečias elementas (pradedant nuo trečiojo), ir taip toliau.

Pavyzdys

Raskime h2, kuris yra 2-asis h2 tėviniame elemente:

html<div>
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
</div>

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

Результат:

Pavyzdys

Raskime visus lyginius h2:

html<div>
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
</div>

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

Результат:

Pavyzdys

Raskime visus nelyginius h2:

html<div>
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
</div>

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

Результат: