Wat zijn pseudo-klassen in CSS?

CSS-pseudo-klassen zijn sleutelwoorden die aan selectors worden toegevoegd om een speciale toestand van het element aan te geven. Ze maken het mogelijk om stijlen toe te passen op basis van de interactie van de gebruiker, de positie in de structuur van het document of andere kenmerken die niet kunnen worden uitgedrukt met standaardselectors.

Voorbeelden van pseudo-klassen:

• Gebruikersstatussen:

  • :hover - element waar de muis overheen beweegt.
  • :active - element dat wordt geactiveerd (bijvoorbeeld, een knop die wordt ingedrukt).
  • :focus - element dat de invoerfocus heeft (bijvoorbeeld, een tekstveld).
  • :visited - link die de gebruiker al heeft bezocht.
  • :link - link die de gebruiker nog niet heeft bezocht.

• Positie in de structuur:

  • :first-child - eerste kind van de ouder.
  • :last-child - laatste kind van de ouder.
  • :nth-child(n) - n-de kind van de ouder.
  • :first-of-type - eerste element van dat type onder de kinderen.
  • :last-of-type - laatste element van dat type onder de kinderen.

• Andere:

  • :empty - element zonder kinderen of tekst.
  • :not(selector) - elementen die niet overeenkomen met de opgegeven selector.

Syntax:

selector:pseudo-class {
  property: value;
}

Voorbeeld van gebruik:

/* Verander de tekstkleur bij hover over een paragraaf */
p:hover {
  color: blue;
}

/* Stijl voor het eerste lijstitem */
li:first-child {
  font-weight: bold;
}

Pseudo-klassen breiden de mogelijkheden van selectors uit, waardoor het mogelijk is om meer dynamische en interactieve interfaces te creëren zonder JavaScript te gebruiken voor eenvoudige stijlwijzigingen.