W3cubDocs

/CSS

:active

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.

This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules. In order to style the appropriate links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

Note: On systems with multi-button mice, CSS 3 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 { style properties }

Example

HTML

<body>
    <h1>:active CSS selector example</h1>
    <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
</body>

CSS

body { background-color: #ffffc9 }
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 */

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	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	4.0	5.0	1.0
Support on non-`<a>` elements	1.0	1.0 (1.7 or earlier)	8.0	7.0	1.0

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1.0)	6.0	6.0	1.0
Support on non-`<a>` elements	1.0	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>.