CSS :active pseudo-class

Definition and Usage

CSS :active Pseudo-classes are used to select and set the styles for the elements that the user is currently activating.

:active Pseudo-classes are most commonly used <a> and <button> elements. When the user clicks on a link, the link becomes active; the same applies to buttons.

Tip:Use :link Set the style of the link for the unvisited page, use :visited Set the style of the link for the visited page, use :hover Set the style of the link when the mouse hovers over it.

Note:In CSS definitions,:active It must be placed :hoverIt will take effect only after (if it exists)!

Example

Example 1

Select and set the styles for active links:

a:active {
  background-color: yellow;
}

Try it yourself

Example 2

Select and set the styles for <button> when clicked by the user:

button:active {
  background-color: pink;
}

Try it yourself

Example 3

Select and set the styles for <p>, <h1>, and <a> elements when clicked:

p:active, h1:active, a:active {
  background-color: yellow;
}

Try it yourself

Example 4

Select and set the styles for unvisited, visited, hovered, and active links:

/* Unvisited link */
a:link {
  color: green;
}
/* Visited link */
a:visited {
  color: green;
}
/* Hovered link */
a:hover {
  color: red;
}
/* Active link */
a:active {
  color: yellow;
}

Try it yourself

Example 5

Set different styles for links:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Try it yourself

CSS Syntax

:active {
  css declarations;
}

Technical details

Browser support

The numbers in the table indicate the first browser version that fully supports the pseudo-class.

Related pages

Tutorial:CSS Links

Tutorial:CSS Buttons

Tutorial:CSS Pseudo-classes