:active

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="#">).

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:

See the Pen :active state by CSS-Tricks Team (@css-tricks) on CodePen.

:Active can also apply to any element. In the Pen below, clicking anywhere on the page will make the whole page yellow:

See the Pen Demo of the :active psuedo class by CSS-Tricks Team (@css-tricks) on CodePen.

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).

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yep 2.0.4+ any 4+ 4+ TBD TBD

Comments

  1. User Avatar
    Cyberjob000
    Permalink to comment#

    “to remove” or “to remember” ? As in a pneumonic? Whoa…

    • User Avatar
      adam rowe
      Permalink to comment#

      pneumonic: memory device used in aiding recollection of respiratory woes

  2. User Avatar
    Chris
    Permalink to comment#

    Not working on iOS :-( Hover or Active states don’t get displayed..

  3. User Avatar
    Chris
    Permalink to comment#

    ...

  4. User Avatar
    Chris
    Permalink to comment#
        ...
    
    
  5. User Avatar
    Chris
    Permalink to comment#

    Is it not possible to add html code here that gets displayed rather than parsed?

  6. User Avatar
    Keannu Atilano
    Permalink to comment#

    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.

    • User Avatar
      Cowbell
      Permalink to comment#

      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.

    • User Avatar
      zz
      Permalink to comment#

      zzz

  7. User Avatar
    استخدام
    Permalink to comment#

    Hi
    Not working on IoS.
    What’s wrong?

  8. User Avatar
    Nathan Bui
    Permalink to comment#

    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.

  9. User Avatar
    Herman Nz
    Permalink to comment#

    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.

  10. User Avatar
    Wangdi
    Permalink to comment#

    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.

    • User Avatar
      Toneka
      Permalink to comment#

      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.

  11. User Avatar
    rehab
    Permalink to comment#

    Your comment here. Be cool.

  12. User Avatar
    Will
    Permalink to comment#

    For iOS, use: a:link { -webkit-tap-highlight-color: #aa0000; }

  13. User Avatar
    Jeremy Mouton
    Permalink to comment#

    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!

  14. User Avatar
    john
    Permalink to comment#

    Nice job

  15. User Avatar
    john
    Permalink to comment#

    L :link
    O
    V :visited
    E

    H :hover
    A :active
    T
    E

    simply good

  16. User Avatar
    Mike
    Permalink to comment#

    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!

  17. User Avatar
    Mike
    Permalink to comment#

    Errr. top of the list that is. lol

  18. User Avatar
    Oksana Romaniv
    Permalink to comment#

    Wow, so simple yet powerful! Thank you for sharing!

  19. User Avatar
    Gigi
    Permalink to comment#

    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…

  20. User Avatar
    Jayalakshmi
    Permalink to comment#

    i have one menu list ..that list element active state color not appered but background color is applying what is the reason of this .

  21. User Avatar
    Akshay Iyer
    Permalink to comment#

    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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag