Pseudo-klassen maken het mogelijk om elementen nauwkeurig te selecteren op basis van hun volgorde binnen een container. Laten we enkele van de meest gebruikte pseudo-klassen bekijken.

:first-child

De :first-child pseudo-klasse selecteert een element dat het eerste kind is van zijn ouder, ongeacht het tag- of klassennaam. Overweeg het volgende voorbeeld ter verduidelijking. We hebben een reeks elementen en alleen voor het eerste element (het eerste <li>-element) willen we de color-eigenschap instellen op blue.

Uitvoer

Alleen het eerste FAQ-item is geselecteerd en er zijn specifieke stijlen toegepast.

:last-child

De :last-child pseudo-klasse richt zich op het laatste kind van zijn ouder, waardoor we alle eigenschappen ervan kunnen aanpassen. Laten we een voorbeeld bekijken om te illustreren hoe we deze pseudo-klasse effectief kunnen gebruiken.

Uitvoer

:nth-child

De pseudo-klasse :nth-child maakt het mogelijk om elementen te selecteren op basis van hun positie binnen een lijst van broers en zussen. Eenvoudige targeting kan worden gestart door een getal op te geven. Bijvoorbeeld:

Uitvoer

De accentstijlen zijn alleen toegepast op de geselecteerde elementen (2e en 3e).

Geavanceerde :nth-child

Voor complexere scenario's kun je de formule an+b gebruiken om meerdere elementen te selecteren op basis van hun positie. Zo werkt de formule:

• a bepaalt het herhalingspatroon (bijvoorbeeld elke 2e, 3e kind, enz.);
• b stelt het beginpunt of de offset voor de selectie in;
• n fungeert als teller die bij elke iteratie met 1 wordt verhoogd, beginnend bij 0.

Hier volgen enkele typische selectoren.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

:not()

De :not() pseudo-klasse selecteert elementen die niet overeenkomen met een opgegeven selector. Bijvoorbeeld, :not(p) selecteert alle elementen behalve <p>-elementen. Laten we enkele voorbeelden bekijken: