Pseudo-klasser for brugerhandlinger anvender stil på et interaktivt element baseret på dets aktuelle tilstand. Det hjælper med at opmuntre brugere og informere dem om, hvad der netop er sket. Typisk tilføjes tilstands-pseudo-klasser til <button> og <a> elementerne.

Syntaksen er som følger:

selector:pseudo-class {
  property: value;
}

• selector kan være enhver selektor, vi har gennemgået i de foregående kapitler;
• pseudo-class kræver : før deklarationen, og der tilføjes ikke mellemrum.

Bemærk

Vi vil gennemgå de mest nyttige tilstands-pseudo-klasser (hover, focus, active og visited).

:hover

Pseudo-klassen :hover bruges til at reagere på brugerhandlinger, når de interagerer med et element ved hjælp af en pegeenhed, såsom at føre musemarkøren hen over elementet. Dette kan afprøves i følgende eksempel ved at føre musen hen over button og a elementerne for at se effekten.

:focus

Pseudo-klassen :focus fungerer på en lignende måde som pseudo-klassen :hover. Den reagerer på, at et element får fokus, hvilket typisk opnås via tastaturnavigation med "Tab"-tasten. For at sikre ensartet adfærd for interaktive elementer for alle brugere anbefales det at anvende begge pseudo-klasser sammen til styling. På denne måde får både brugere, der navigerer med musen, og dem der bruger tastaturet, den samme oplevelse.

Forskellen mellem :hover og :focus

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

I det følgende eksempel har vi det samme element med forskellige pseudo-klasser. Bemærk venligst filen styles.css. Vi kan se, at vi kan tilføje de samme stilarter for hover- og focus-effekt ved at adskille selektoren og pseudo-klassen med ,.

:active

:active aktiveres, når et element aktiveres, for eksempel ved klik på et link. Selvom ethvert element kan aktiveres, bruges denne pseudo-klasse generelt til links og knapper.

:visited

:visited pseudo-klassen anvendes på links, der er blevet besøgt. Som standard vises links i blå og ændres til lilla, når de er besøgt.