March 25, 2019

Staying Healthy With the Active Pseudo Class

By Cody Lewis

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

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

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

Recap

  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"

Resources

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


Cody Lewis - Developer

About Cody Lewis

Cody is a self-taught developer with an eagerness to learn and the ability to think outside of the box. Cody can be found at local meetups whether speaking or attending -- he hopes to see you there.