:active

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.

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

See also

Document Tags and Contributors

Tags: 
 Contributors to this page: chrisdavidmills, KadirTopal, mfluehr, stephaniehobson, wahome, erikadoyle, Sebastianz, cvrebert, teoli, jwhitlock, lginter, kscarfone, Deraillor, tregagnon, Sheppy, ethertank, tw2113, ronj, wlach, brianloveswords, FredB, McGurk, Jürgen Jeka, BijuGC
 Last updated by: chrisdavidmills,