CSS :active Selector

a:active {
  color: red;
  border: 2px solid black;
}

Meaning

The :active selector specifies the link has been clicked(active link).

When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

The :active pseudo-class is commonly used on <a> and <button> elements.

Other common targets of this pseudo-class include elements that are contained in an activated element, and form elements that are being activated through their associated <label>.

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

Version: CSS1

Standard Syntax

:active {
  css declarations;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

More Example

Styling unvisited, visited, hover, and active links:

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: black;
}

/* selected link */
a:active {
  color: pink;
}