The :active pseudo-class defines the style of the active element. This is the state of the element that occurs between clicking and releasing the mouse button.


The pseudo-class :active is used to style the element (link) the moment it is activated (pressed) by the user.

The interaction of an element with the mouse is typically the time between the user pressing and releasing the mouse button. Moreover, the :active pseudo-class fires when using the TAB key on the keyboard. The :active pseudo-class is typically used for HTML and elements <a><button> but can be applied to other elements as well.

This property can be overridden by any of the other reference-related pseudo-classes, such as :link:hover and :visited, as described in the official specification. To style the links you want, you need to put the rule :active after all other rules related to the link, as defined by the LVHA order rule: :link ⇢ :visited ⇢ :hover ⇢ :active.

Note: Browsers have a limited set of CSS properties that can be used in conjunction with the :visited pseudo-class:

  • color
  • background-color
  • border-color
  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
  • outline color
  • column-rule-color

All other styles will be inherited from :link.


a:link {
	color: blue;

a:visited {
	color: orange;

a:hover {
	color: green;

a:active {
	color: violet;

An unvisited link will be blue, and a visited link will be orange. If you hover over it with your mouse, it will turn green, and if you press the left mouse button and hold it down, it will turn violet (active state).

Example link: stackdiary.com/css-reference/