:active

Last updated on: November 26, 2011

The :active pseudo selector will match when an element is currently being pressed down on by the mouse cursor. 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:

a { 
  position: relative;
}
a:active {
  top: 1px;
}

Although it can apply to any element. With this, clicking anywhere on the page will make the whole page yellow:

html:active {
  background: yellow;   
}

It is best practice to cover all of the "states", particularly for links. An easy way to remove 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