Pseudo-klassen voor gebruikersacties stijlen een interactief element op basis van de huidige status. Dit helpt om gebruikers te stimuleren en hen te laten weten wat er zojuist is gebeurd. Over het algemeen voegen we de status-pseudo-klassen toe aan de <button>- en <a>-elementen.

De syntaxis is als volgt:

selector:pseudo-class {
  property: value;
}

• selector kan elke selector zijn die we in de vorige hoofdstukken hebben behandeld;
• pseudo-class vereist : vóór de declaratie, en we voegen geen spatie toe.

Opmerking

We behandelen de meest bruikbare status-pseudo-klassen (hover, focus, active en visited).

:hover

De :hover pseudo-klasse wordt gebruikt om te reageren op gebruikersacties wanneer zij met een aanwijsapparaat, zoals een muis, over een item bewegen. We kunnen dit testen in het volgende voorbeeld door met de muis over de button- en a-elementen te bewegen om het effect te zien.

:focus

De :focus pseudo-klasse werkt op een vergelijkbare manier als de :hover pseudo-klasse. Deze reageert op de focus van een element, wat meestal wordt bereikt via toetsenbordnavigatie met de "Tab"-toets. Om consistent gedrag van interactieve elementen voor alle gebruikers te waarborgen, wordt aanbevolen beide pseudo-klassen samen te gebruiken voor styling. Op deze manier krijgen gebruikers die met de muis navigeren en gebruikers die met het toetsenbord navigeren dezelfde ervaring.

Het verschil tussen :hover en :focus

• :hover reageert op activiteit van de muiscursor;
• :focus reageert op activiteit van het toetsenbord ("Tab"-toets).

In het volgende voorbeeld hebben we hetzelfde element met verschillende pseudo-klassen. Let goed op het bestand styles.css. We kunnen zien dat we dezelfde stijlen kunnen toepassen voor het hover- en focus-effect door de selector en pseudo-klasse te scheiden met een ,.

:active

:active wordt geactiveerd wanneer een item wordt geactiveerd, bijvoorbeeld bij het klikken op een link. Hoewel elk element geactiveerd kan worden, wordt deze pseudo-klasse meestal gebruikt voor links en knoppen.

:visited

:visited pseudo-class wordt toegepast op links die bezocht zijn. Standaard worden links weergegeven in blauw en veranderen ze naar paars wanneer ze bezocht zijn.