Staying Healthy With the Active Pseudo Class
: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.
You can activate a pseudo class using the dev tools within your browser of choice. Learn more about this here.
How & Where is
: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.
:active and 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.1
:activeselector is used on
<a href="#">, though it can be used anywhere
- As always with CSS, order matters, remember “LOVE HATE”