CSS :nth-child() pseudoklasse

Definitie en gebruik

CSS :nth-child(n)}} pseudo-klasse om elementen te matchen die als het n van kindelementen.

Deze pseudoklasse matcht elementen op basis van hun index in de sublist van hun ouderlement.

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

Tip:Bekijk :nth-of-type() pseudo-klasse om elementen te kiezen die als kindelementen zijn vanvan dezelfde soort (tagnaam)van n van elementen die kindelementen zijn.

Voorbeeld

Voorbeeld 1

Hoe te gebruiken :nth-child() Pseudoklasse:

/* Kies elke vierde element in elke groep van broers */
:nth-child(4) {
  achtergrondkleur: geel;
}
/* Kies de tweede element in de div-broers */
div:nth-child(2) {
  achtergrondkleur: rood;
}
/* Kies de tweede li-element in de lijst */
li:nth-child(2) {
  achtergrondkleur: lichtgroen;
}

Probeer het zelf

Voorbeeld 2

oneven 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 bepalen we een verschillende achtergrondkleur voor de <p>-elementen met een oneven en even index:

p:nth-child(oneven) {
  achtergrondkleur: rood;
}
p:nth-child(even) {
  achtergrond: lichtgroen;
}

Probeer het zelf

Voorbeeld 3

gebruik de formule (an + b) Beschrijving:a vertegenwoordigt een integerstap, n is alle niet-negatieve integeren die beginnen bij 0,b is een integeroffset.

Hier bepalen we de achtergrondkleur voor alle <p>-elementen met een index die een drietal is (we kiezen de derde, zesde, negende, enz.):

p:nth-child(3n+1) {
  achtergrondkleur: rood;
}

Probeer het zelf

Voorbeeld 4

Hier bepalen we de achtergrondkleur voor alle <p>-elementen met een index die een drietal is. Vervolgens trekken we 1 af (we kiezen de eerste, vierde, zevende, enz.):

p:nth-child(3n-1) {
  achtergrondkleur: rood;
}

Probeer het zelf

CSS-syntaxis

:nth-child(index | oneven | even | an+b) {
  css-aanwijzingen;
}

Technische details

Browserondersteuning

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