:active

:active – pseudo-class | CSS Level 1

The :active selects an element that is being activated by the user with left mouse button or keyboard tab key. The given style is visible only for short time between mouse down and mouse up event or key down and key up event.

Syntax

element:active {
    style properties
}

Example

Click me!

<a>Click me!</a>
a:active {
    color: blue;
}

The :active pseudo-class can be used on all elements not only a link element <a> or a button element <button> .

I am a super paragraph! Click me!!!

<p>I am a super paragraph!</p>
p:active {
    background: #62A2BF ;
}

The :active must be listed after :visited style. The proper order pseudo classes:

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: green;
}
a:active {
    color: red;
}

If :visited pseudo-class was listed after :active and :hover it would override their styles. And in this case the link always would be purple despite if you were hovering or activating the link.

Related

Resources

Browser compatibility

Internet Explorer
works
Firefox
works
Chrome
works
Safari
works
Opera
works