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.

https://codepen.io/codylewis/pen/drGqKb

: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".

https://codepen.io/codylewis/pen/rRxqwE

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.

https://codepen.io/outliercody/pen/XGXxxb

Recap

  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"

Resources

This content was originally published by the author at https://codylewis.net/posts/2019/03/staying-healthy-with-the-active-pseudo-class

Get your project started today

Get in Touch