Web/CSS/ active

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.

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

The :active pseudo-class is commonly used on <a> and <button> elements. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.

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

Examples

Active links

HTML

<p>This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

CSS

a:link { color: blue; }          /* Unvisited links */
a:visited { color: purple; }     /* Visited links */
a:hover { background: yellow; }  /* Hovered links */
a:active { color: red; }         /* Active links */

p:active { background: #eee; }   /* Active paragraphs */

Result

Active form elements

HTML

<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

Result

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of ':active' in that specification.	Living Standard
Selectors Level 4The definition of ':active' in that specification.	Working Draft	No change.
Selectors Level 3The 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 1The definition of ':active' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:active`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 5	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Non-`a` element support	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 8	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1 Notes' Full support 1 Notes' Notes' By default, Safari on iOS does not use the `:active` state unless there is a `touchstart` event handler on the relevant element or on the `<body>` element.	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.': See implementation notes.

Web/CSS/ active

Contents

Syntax

Examples

Active links

HTML

CSS

Result

Active form elements

HTML

CSS

Result

Specifications

Browser compatibility

Legend

See also