CSS :active Pseudo Class
Use the :active CSS pseudo-class for styling the active link. Read about the pseudo class and try examples.
The :active CSS pseudo-class selects and styles an element while it is being activated by the user — most commonly the brief moment between pressing the mouse button down on a link or button and releasing it. This page explains how :active works, why the order of link rules matters, and shows runnable examples for links, buttons, and other elements.
An element becomes active when the user presses down the primary mouse button on it (and stays active until the button is released). On touch screens it applies while the element is being touched.
:active is most often used on the <a> and <button> elements, but it can target any element. It also matches an element that contains an activated element, and form controls that are activated through their <label>.
Why rule order matters
The :link, :visited, and :hover pseudo-classes can override the styles set by :active because of how the cascade resolves rules with equal specificity — the last matching rule wins. To make the active state visible, list link-related rules in this exact order (remember it as LVHA):
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover { color: #2980b9; } /* mouse over */
a:active { color: #8ebf42; } /* being clicked */Put :active after :link, :visited, and :hover, otherwise the earlier rules would mask it.
Do not confuse :active with :focus. While :active applies while an element is being activated (e.g., during a mouse click), :focus applies when an element receives keyboard or programmatic focus.
On systems with multi-button mice, CSS3 specifies that the :active state is triggered by the primary input button (typically the left mouse button).
Version
Syntax
CSS :active Pseudo Class example
:active {
css declarations;
}Example of the :active pseudo-class:
CSS :active Pseudo Class Code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:active {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<a href="https://www.w3docs.com/">w3docs.com</a>
</body>
</html>Example of the :active pseudo-class with the <a> tag:
CSS :active Pseudo Class, code example 2
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:active {
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>In the following example, click on the text to see how the color changes.
Example of the :active pseudo-class with the <div> tag:
CSS :active Pseudo Class, another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:active {
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Example of :active on a <button>:
Combining :active with :hover and :focus is a common way to give buttons a full set of interactive states. The :active rule below gives the button a "pressed" look while the mouse button is held down.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #1c87c9;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #156a9e;
transform: translateY(2px);
}
</style>
</head>
<body>
<h2>:active on a button</h2>
<button>Press me</button>
</body>
</html>Things to keep in mind
:activevs:focus.:activelasts only while the element is being pressed;:focusstays as long as the element holds keyboard/programmatic focus. Use:focus(or:focus-visible) for keyboard accessibility — never rely on:activealone, because it is unreachable by keyboard-only users.- Don't remove all visual feedback. Styling
:active,:hover, and:focustogether helps users understand that an element is interactive. - Specificity matters too. Rule order only resolves ties between selectors of equal specificity. A more specific selector elsewhere can still win, so keep your link rules at the same specificity level.