Staying Healthy With the Active Pseudo Class

The <inlinecode>:active<inlinecode> selector is 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?

<inlinecode>:active<inlinecode> is used on <inlinecode><button><inlinecode> and <inlinecode><a href="#"><inlinecode> tags though it could be used on anything, not that you'd want to. When clicking anywhere in the CodePen below, a CSS selector <inlinecode>html:active<inlinecode> will apply a background color. This functionality isn't particularly useful but good to know what can be done.

:active and Other Pseudo Classes

Order matters when <inlinecode>:active<inlinecode> interacts with other pseudo classes such as <inlinecode>:link<inlinecode>, <inlinecode>:visited<inlinecode>, and <inlinecode>:hover<inlinecode>. There's a handy acronym to remember the correct order called "LOVE HATE".

The order matters due to the cascading nature of CSS. If the <inlinecode>:link<inlinecode> selector was after the <inlinecode>:visited<inlinecode> 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 <inlinecode>a:link<inlinecode> as CSS selectors. MDN made an excellent CodePen to illustrate this here.


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


This content was originally published by the author at

Get your project started today

Get in Touch