Pseudo-klasser

Pseudo-klasser är ett kraftfullt verktyg i CSS som gör det möjligt att styla element baserat på deras tillstånd eller placering i dokumentet.

Vanliga pseudo-klasser

• Hover: Aktiveras när muspekaren svävar över ett element.
• Focus: Aktiveras när ett element får fokus, t.ex. när man klickar på det eller tabbar till det.
• Active: Aktiveras när ett element är aktivt, t.ex. när en knapp klickas på.
• First-child: Stylar det första barnet till ett element.
• Last-child: Stylar det sista barnet till ett element.
• Nth-child(n): Stylar det n:te elementet i en grupp av element.

Exempel

a:hover {
  color: blue;
}

input:focus {
  border: 1px solid red;
}

.knapp:active {
  background-color: green;
}

Användning

Pseudo-klasser kan användas för att förbättra användarupplevelsen, t.ex. genom att:

• Markera länkar när muspekaren svävar över dem.
• Höjdpunkten i inmatningsfält när de får fokus.
• Ändra utseendet på knappar när de klickas på.

Tillgänglighet

Pseudo-klasser kan också förbättra tillgängligheten genom att:

• Gör det lättare att identifiera länkar och andra interaktiva element.
• Tillhandahålla visuell feedback när element interageras med.
• Gör text mer läsbar genom att markera fokuserade områden.