Pseudo-klasser

Dokumentasjon fra MDN: Pseudo-classes

I forrige seksjon kunne du se noen selectorer som så ut som følger:

selector:pseudo-class {
    property: value;
}

En slik pseudo-klasse er et nøkkelord lagt til en spesifikk selector for å indikere hvilken state elementet er i. :hover er kanskje en av de mest kjente pseudo-klassene, som lar deg style hvordan en lenke eller knapp skal se ut når du flytter musepekeren over den.

Oppgaver

• Gå til Styles i DevTools (i Chrome). I den øverste headeren (hvor det står Filter), er det en knapp med :hov på seg. Trykk på denne. Velg ulike element states for elementene du har på siden din, og test ut hva de ulike statene påvirker. DevTools i Firefox har også samme mulighet, men den ligger i Inspector-fanen under knappen "toggle pseude-classes" som er illustrert med to L-former og en firkant.

• Style knappene fra forrige seksjon ved hover og fokus.