Neon DistrictISSUE #20 of 50

pseudo-classes · :hover · :focus · :active

PrismaVSJank the Janitor

Prisma saysState pseudo-classes :hover, :focus, and :active style elements during interaction.

:hover applies while the pointer is over an element, :focus when it's focused, :active during the press. Always include :focus (or :focus-visible) wherever you style :hover, so keyboard users get the same feedback. The foundation of interactive feel.

Power-ups you unlock

:hover (pointer), :focus (focused), :active (pressed)
Always pair :focus with :hover
:focus-visible shows focus only for keyboard
Foundation of interactive UI feedback

Jank the Janitor attacks — common mistakes

Styling :hover but not :focus
Removing the focus ring with no replacement
:active styles too brief to notice

Boss battleStyle a button for hover, focus, and active with distinct feedback.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>a{color:#b388ff;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:2px solid #8aff9d}a:active{color:#ff7a8a}</style></head><body style="background:#06040d;padding:20px"><a href="#">interactive link</a></body></html>

▶ Open the interactive comic issue

‹ Aspect-Ratio · Holding Shape Pseudo-Classes · :Nth-Child · :Nth-Of-Type ›