Brukerhandlings-pseudoklasser styler et interaktivt element basert på dets nåværende tilstand. Dette bidrar til å veilede brukere og informere dem om hva som nettopp har skjedd. Vanligvis legger vi til tilstands-pseudoklasser på <button>- og <a>-elementene.

Syntaksen er som følger:

selector:pseudo-class {
  property: value;
}

• selector kan være hvilken som helst selektor vi har vurdert i de foregående kapitlene;
• pseudo-class må ha : foran deklarasjonen, og vi legger ikke til mellomrom.

Merk

Vi vil se på de mest nyttige tilstands-pseudoklassene (hover, focus, active og visited).

:hover

:hover-pseudoklassen brukes for å reagere på brukerhandlinger når de interagerer med et element ved hjelp av en peker, for eksempel når musepekeren holdes over elementet. Vi kan teste dette i eksempelet under ved å holde musepekeren over button- og a-elementene for å se effekten.

:focus

Pseudo-klassen :focus fungerer på en lignende måte som pseudo-klassen :hover. Den reagerer på at et element får fokus, noe som vanligvis oppnås gjennom tastaturnavigasjon ved bruk av "Tab"-tasten. For å sikre konsistent oppførsel for interaktive elementer for alle brukere, anbefales det å bruke begge pseudo-klasser sammen for styling. På denne måten får både brukere som navigerer med mus og de som bruker tastatur, samme opplevelse.

Forskjellen mellom :hover og :focus

• :hover reagerer på musepekerens aktivitet;
• :focus reagerer på tastaturaktivitet ("Tab"-tasten).

I det følgende eksempelet har vi det samme elementet med ulike pseudoklasser. Vennligst legg merke til filen styles.css. Vi kan se at vi kan legge til de samme stilene for hover- og focus-effekt ved å skille selektor og pseudoklasse med ,.

:active

:active utløses når et element aktiveres, for eksempel ved å klikke på en lenke. Selv om alle elementer kan aktiveres, brukes denne pseudoklassen vanligvis for lenker og knapper.

:visited

:visited pseudoklasse brukes på lenker som har blitt besøkt. Som standard vises lenker i blått og endres til lilla når de er besøkt.