Pseudo-klassen voor gebruikersacties maken het mogelijk om elementen te stijlen op basis van interacties van gebruikers. Ze worden vaak toegepast op <button>- en <a>-elementen om visuele feedback te geven tijdens interacties.

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, zonder spatie.

:hover

Wordt geactiveerd wanneer een gebruiker met de muiscursor op een element wijst. Geschikt voor het creëren van interactieve visuele feedback.

:focus

Activeert wanneer een element toetsenbordfocus ontvangt (meestal via de Tab-toets). Voor toegankelijkheid worden hover- en focusstijlen vaak gecombineerd, zodat muis- en toetsenbordgebruikers een consistente ervaring hebben.

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 zien dat we dezelfde stijlen kunnen toepassen voor het hover- en focus-effect door de selector en pseudo-klasse te scheiden met ,.

:active

Geactiveerd terwijl een element wordt geactiveerd, meestal tijdens een muisklik op knoppen of links.

:visited

Toegepast op links nadat de gebruiker hun bestemming al heeft bezocht. Browsers tonen doorgaans niet-bezochte links in blauw en bezochte links in paars, tenzij deze stijlen worden overschreven.