Treehouse: Grow your CSS skills. Land your dream job.

:active

Last updated on:

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. Cyberjob000
    Permalink to comment#

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

  2. Chris
    Permalink to comment#

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

  3. Chris
    Permalink to comment#

    ...

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

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

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

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

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

    Hi
    Not working on IoS.
    What’s wrong?

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

  11. rehab
    Permalink to comment#

    Your comment here. Be cool.

  12. Will
    Permalink to comment#

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```