Pseudoklasse nth-of-type

De pseudoklasse nth-of-type selecteert een element, dat de n-de descendant van een opgegeven type is.

Dat wil zeggen, als ik h2:nth-of-type(4) schrijf - wordt de 4de h2 in de ouder gevonden (in tegenstelling tot nth-child, die alleen die h2 vindt, die het 4de element in de ouder is).

Syntaxis

cssselector:nth-of-type(getal | odd | even | expressie){

}

Waarden

Waarde	Beschrijving
getal	Een positief getal vanaf `1`. Specificeert het nummer van het element, waar we naar willen verwijzen. De nummering van elementen begint bij `1`.
`odd`	Oneven elementen.
`even`	Even elementen.
expressie	Je kunt speciale expressies samenstellen met de letter n, die alle gehele getallen van nul (niet van één) tot oneindig vertegenwoordigt. Dus, `2n` - betekent alle even getallen (te beginnen bij de tweede). Hoe is dit te begrijpen? Vervang in `n` opeenvolgend getallen vanaf `0` en zo verder: als n = 0, dan geeft 2n 0 - zo'n element bestaat niet (nummering van elementen begint bij 1), als n = 1, dan geeft 2n 2 - het tweede element, als n = 2, geeft 2n 4 - het vierde element. Als je 3n schrijft - is dat elk derde element (te beginnen bij de derde), enzovoort.

Voorbeeld

Laten we de h2 vinden, die de 2de h2 in de ouder is:

html<div>
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
</div>

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

Результат:

Voorbeeld

Laten we alle even h2 vinden:

html<div>
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
</div>

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

Результат:

Voorbeeld

Laten we alle oneven h2 vinden:

html<div>
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
  
  <h2>titel</h2>
  <p>alinea</p>
</div>

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

Результат: