Cody Lewis

Developer | Aspiring Speaker

Staying Healthy With the Active Pseudo Class

The :active selector used when an element is in a, you guessed it, active state.

The active state is that split second when a button or link is clicked and the user is navigated away.

Quick Tip

You can activate a pseudo class using the dev tools within your browser of choice. Learn more about this here.

How & Where is :active Used?

:active is used on <button> and <a href="#"> tags though it could be used on anything, not that you’d want to.

When clicking anywhere the CodePen below, a CSS selector html:active will apply a background color. This functionality isn’t particularly useful but good to know what can be done.

See the Pen A Different Way to Use :active by outliercody (@outliercody) on CodePen.

:active and Other Pseudo Classes

Order matters when :active interacts with other pseudo classes such as :link, :visited, and :hover. There’s a handy acronym to remember the correct order called “LOVE HATE”.

See the Pen Pseudo classes LOVE HATE by codylewis (@codylewis) on CodePen.

The order matters due to the cascading nature of CSS. If the :link selector was after the :visited selector then you’d never see the purple color of a visited link.

One item I learned while writing this is the difference between a and a:link as CSS selectors. MDN made an excellent CodePen to illustrate this.1

See the Pen Examples by outliercody (@codylewis) on CodePen.


  1. :active selector is used on <button> and <a href="#">, though it can be used anywhere
  2. As always with CSS, order matters, remember “LOVE HATE”