: actief - CSS-trucs | CSS Almanac 2025

De :activepseudo-selector verandert het uiterlijk van een link terwijl deze wordt geactiveerd (erop wordt geklikt of anderszins wordt geactiveerd). Het wordt meestal maar een fractie van een seconde gezien en geeft visuele feedback dat er inderdaad op het element is geklikt. Het wordt meestal gebruikt op ankerkoppelingen ( ).

Hier is bijvoorbeeld CSS dat ervoor zorgt dat ankerkoppelingen één pixel naar beneden stoten (waardoor de indruk wordt gewekt dat ze in een driedimensionale ruimte worden geduwd) in de actieve toestand:

Zie de Pen: actieve status door CSS-Tricks Team (@ css-tricks) op CodePen.

: Actief kan ook op elk element worden toegepast. Als u in de onderstaande pen ergens op de pagina klikt, wordt de hele pagina geel:

Zie de Pen Demo van de: active psuedo class door CSS-Tricks Team (@ css-tricks) op CodePen.

Het is het beste om alle "staten" te bestrijken, met name voor links. Een gemakkelijke manier om dat te doen is "LOVE HATE" of

L: link
O
V: bezocht
E

H: hover
A: actief
T
E

Het is ideaal om ze in die volgorde te doen.

a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )

Anders, stel dat als u de: bezochte stijl als laatste vermeldde, als die link werd bezocht, deze de: active en: hover declaratie zou overschrijven en dat de link altijd paars zou zijn, ongeacht of u zweefde of dat de link actief was (niet ideaal).