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
.
: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 { background: yellow; } /* 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>
.