DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It’s usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It’s most typically used on anchor links (<a href="#"></a>).
For instance, here’s CSS that will make anchor links bump down one pixel (giving the impression of being pushed in three-dimensional space) in the active state:
:active can also apply to any element. In the Pen below, clicking anywhere on the page will make the whole page yellow:
It is best practice to cover all of the “states”, particularly for links. An easy way to do that is “LOVE HATE” or
- L
:link - O
- V
:visited - E
- H
:hover - A
:active - T
- E
Doing them in that order is ideal.
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}Otherwise, say if you listed the :visited style last, if that link was visited it would override the :active and :hover declaration and the link would always be purple regardless if you were hovering or if the link was active (not ideal).
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| All | All | All | All | All | All |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| All | All | All | All | All |
“to remove” or “to remember” ? As in a pneumonic? Whoa…
pneumonic: memory device used in aiding recollection of respiratory woes
Not working on iOS :-( Hover or Active states don’t get displayed..
You need that on the body tag:
...Is it not possible to add html code here that gets displayed rather than parsed?
sir can i ask ? what is will i use when i click the image i can resize it. i have already done it but the problem is that i used #id:active{
/* codes*/
}.
whenever i click the link or image . it will reverse back to normal . please help.
It seems we need to have a “Focus” code to show that the link has been selected, but you will need to change that for each page, which is the thing we are trying to avoid.
I would also like a code to show we are on the page we clicked on.
zzz
Hi
Not working on IoS.
What’s wrong?
I should have read a lot of these articles sooner. Thanks for the brief explanation for why the links should be styled in the order that is considered best practice.
I finally find my solution here again, thanks a lot. By the way, How can I perform it with dropdown menu. is it possible? I’m new with this.
That :active thing is ok, but i need something more like changing the color of the link as long as it is active. Highlighting the link not just for short period while it is clicked, but for a long time.
Easy solution I found is to give the HTML link a class called active, then in CSS style a.active with your chosen settings. Requires you to manually add class=”active” to each link you want done.
Your comment here. Be cool.
55236
For iOS, use:
a:link { -webkit-tap-highlight-color: #aa0000; }Its work ! Thanks.
To those asking for a fix on iOS:
Adding this JS line will make the pseudo elements work on iOS.
document.addEventListener("touchstart", function() {},false);https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
I don’t really understand how this works, but it does. Magic!
Nice job
L :link
O
V :visited
E
H :hover
A :active
T
E
simply good
Thank you so much for the trick! I spent hours trying to figure out why my active state was not showing on my page. I had .active at the end of my list! Keep up the good work!
Errr. top of the list that is. lol
Wow, so simple yet powerful! Thank you for sharing!
Why didn’t you bring the “focus”element, as advantage over “visited”. Changes every time you click in a new link, avoiding the confusion and letting work the active element every time, perhaps putting together active and focus you get the effect of selection besides the “hover”ing with the mouse every new (not used last time) link…
i have one menu list ..that list element active state color not appered but background color is applying what is the reason of this .
Thank you for making CSS so much fun!
I was doing a portfolio project from FreeCodeCamp and I literally broke down because I couldn’t understand CSS.
I’m so glad I found this amazing website.