:active

Avatar of Sara Cope
Sara Cope on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

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

IEEdgeFirefoxChromeSafariOpera
AllAllAllAllAllAll
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAllAll
Source: caniuse