CSS :nth-of-type() pseudoklasse

Definitie en gebruik

CSS :nth-of-type(n) pseudoklasse wordt gebruikt om te matchen met het n een element in elke van de kinderen.

n kan een getal/index zijn, een keyword (odd of even) of een formule (zoals an + b)

Tip:Bekijk :nth-child() pseudoklasse om te kiezen als het de n een element dat een kind van een element is, ongeacht het type.

Voorbeeld

Voorbeeld 1

Hoe te gebruiken :nth-of-type() Selector:

/* Kies de tweede element in de broers van div */
div:nth-of-type(2) {
  achtergrond: rood;
}
/* Kies de tweede li-element in de lijst */
li:nth-of-type(2) {
  achtergrond: lichtgroen;
}
/* Kies elke derde element in elke groep van broers */
:nth-of-type(3) {
  achtergrond: geel;
}

Probeer het zelf

Voorbeeld 2

odd en even is een keyword dat kan worden gebruikt om elementen met een oneven of even index te matchen (de index van het eerste kind is 1).

Hier wijzen we de achtergrondkleur toe aan de <p>-elementen met een oneven en even index:

p:nth-of-type(odd) {
  achtergrond: rood;
}
p:nth-of-type(even) {
  achtergrond: blauw;
}

Probeer het zelf

Voorbeeld 3

Gebruik de formule (an + b) Beschrijving:a stelt een integerstap voor, n is alle niet-negatieve integers die beginnen bij 0,b is een integerafstand.

Hier wijzen we de achtergrondkleur toe aan alle <p>-elementen met een index die een drievoud is (dit selecteert de derde, zesde, negende, enz.):

p:nth-of-type(3n+0) {
  achtergrond: rood;
}

Probeer het zelf

Voorbeeld 4

Hier wijzen we de achtergrondkleur toe aan alle <p>-elementen met een index die een drievoud is. Vervolgens trekken we 1 af (dit selecteert de tweede, vijfde, achtste, enz.):

p:nth-of-type(3n-1) {
  achtergrond: rood;
}

Probeer het zelf

CSS-syntaxis

:nth-of-type(index | oneven | even | an+b) {
  css-aclaringen;
}

Technische details

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze pseudoklasse volledig ondersteunt.