CSS pseudoklasser

Pseduoklasser er en type selektor i CSS som kan velge andre typer elementer enn vanlige HTML-elementer. Ofte endrer pseudoklassene på elementer som er i en bestemt tilstand.

Hver pseduoklasse starter med et kolon :. Pseudoklasser kan lett forveksles om CSS pseudoselektorer som starter med to kolon ::.

Vanlige pseudoklasser

Bruk :hover for å endre på elementer når man holder musen over dem

button:hover {
	transform: scale(1.2);
}

I tilfellet over vil alle knapper vokse med 20 % dersom man holder musen over dem. Du kan sette alle mulige CSS egenskaper i hover pseudoklassen. Hvis du vil at overgangen fra vanlig tilstand til hover-tilstand skal gå gradvis så kan du bruke en CSS animasjon.

Bruk a:visited på besøkte lenker

Det er nyttig å skille mellom besøkte og ikke-besøkte lenker på nettstedet. Bruk a:visited for å gi besøkte lenker en ny farge.

Bruk :root for å velge hele dokumentet

:root er en selektor for hele dokumentet. Det er vanlig å skrive CSS variabler i :root. Du kan også bruke html eller body til variablene, men :root har høyere spesifisitet og du finner derfor har det blitt vanlig å bruke :root.

Bruk :global i Svelte for endre hele dokumenter

For å få tilgang til det globale scopet i Svelte og endre for eksempel body så bruker du :global(body). CSS som skrives direkte i svelte selektere elementer i HTML elementer i samme sveltefil (samt CSS pseudoselektorer og CSS pseudoklasser)

Oversikt over noen typer pseudoklasser