The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released. The :active pseudo-class is commonly used on <a> and <button> elements, but may be used on other elements, too.

/* Selects any <a> that is being activated */
a:active {
  color: red;

Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-order: :link:visited:hover:active.

Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.





<a href="#">This link will turn lime while you click on it.</a>


a:link { color: blue; }          /* Unvisited links */
a:visited { color: purple; }     /* Visited links */
a:hover { background: yellow; }  /* User hovers */
a:active { color: lime; }        /* Active links */



Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1 4 5 1
Non-a element support 1 Yes 1 8 7 1
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 1 ? Yes 4 6 1 ?
Non-a element support 1 ? Yes 4 ? Yes1 ?

1. By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.