Pseudoklasse nth-of-type

Pseudoklassen nth-of-type vælger et element, som er det n'te barn af en given type.

Det vil sige, hvis jeg skriver h2:nth-of-type(4) - vil den 4. h2 i forælderen blive fundet (i modsætning til nth-child, som kun finder den h2, som er det 4. element i forælderen).

Syntaks

cssselector:nth-of-type(tal | odd | even | udtryk){

}

Værdier

Værdi	Beskrivelse
tal	Et positivt tal startende fra `1`. Angiver elementets nummer, som vi vil henvende os til. Nummereringen af elementer starter fra `1`.
`odd`	Ulige elementer.
`even`	Lige elementer.
udtryk	Man kan sammensætte specielle udtryk med bogstavet n, som betegner alle hele tal fra nul (ikke fra et) til uendelig. Så, `2n` - betyder alle lige tal (startende fra det andet). Hvordan forstår man dette? Vi indsætter i `n` sekventielt tal fra `0` og så videre: hvis n = 0, så giver 2n 0 - et sådant element findes ikke (nummerering af elementer starter fra 1), hvis n = 1, så giver 2n 2 - det andet element, hvis n = 2, giver 2n 4 - det fjerde element. Hvis man skriver 3n - vil dette være hvert tredje element (startende fra det tredje), og så videre.

Eksempel

Lad os finde h2, som er den 2. h2 i forælderen:

html<div>
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
</div>

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

Результат:

Eksempel

Lad os finde alle lige h2:

html<div>
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
</div>

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

Результат:

Eksempel

Lad os finde alle ulige h2:

html<div>
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
</div>

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

Результат: