:active CSS Pseudo Class

Description

The :active pseudo-class defines the style of the active element. This is the state of the element that occurs between the click and release of the mouse button. Mostly applied to links and buttons, but not limited to them.

Syntax

element:active { … }

Example

<p>Hold your mouse button over the links to view the :active pseudo class in action. Link 3 has no :active pseudo class.</p>

<a class="link1" href="#">Link 1</a>

<br>

<a class="link2" href="#">Link 2</a>

<br>

<a href="#">Link 3</a>

.link1:active {

   background: blue;

   color: white;

}

.link2:active {

   font-weight: bold;

   border: 1px solid red;

   text-decoration: none;

}

Notes

Internet Explorer prior to version 8 and Opera prior to version 7 support :active for links only.

Browser Support

Desktop
4	12	1	1	5	1
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 25th November 2019