MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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 mouse button is pressed down 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.

Syntax

:active

Example

HTML

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

CSS

a:link { color: blue } /* Unvisited links */
a:visited { color: purple } /* Visited links */
a:hover { font-weight: bold } /* User hovers */
a:active { color: lime } /* Active links */

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':active' in that specification.
Living Standard  
Selectors Level 4
The definition of ':active' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':active' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of ':active' in that specification.
Recommendation No change.
CSS Level 1
The definition of ':active' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 4.0 5.0 1.0
Support on non-<a> elements 1.0 (Yes) 1.0 (1.7 or earlier) 8.0 7.0 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1.0) 6.0 6.0 1.0
Support on non-<a> elements 1.0 (Yes) 1.0 (1.0) ? ? (Yes) [1]

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

See also

Document Tags and Contributors

 Last updated by: mfluehr,