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.
Recap
:activeselector is used on<button>and<a href="#">, though it can be used anywhere- As always with CSS, order matters, remember “LOVE HATE”