The :active
CSS pseudo-class represents an element (such as a button) that is being activated by the user. It is generally triggered when the user clicks on an element or selects it with the keyboard's tab key. It is commonly used on <a>
and <button>
elements, but may be used on other elements, too.
/* select a, only when it is being activated (e.g. clicked on) */ 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 { font-weight: bold } /* user hovers */
a:active { color: lime } /* active links */
Result
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG 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>
.