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.

Example

 

HTML

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

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 */

Syntax  

CSS
:active <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a>

Description  

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.

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>.

See Also  

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.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:active

CSS CSS Pseudo-class Layout Reference Web