: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.
:active is used on
<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.
:activeand Other Pseudo Classes
Order matters when
:active interacts with other pseudo classes such as
:hover. 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
: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:link as CSS selectors. MDN made an excellent CodePen to illustrate this here.
:activeselector is used on
<a href="#">, though it can be used anywhere
This content was originally published by the author at https://codylewis.net/posts/2019/03/staying-healthy-with-the-active-pseudo-class/