CSS :active Pseudo Class
The :active pseudo-class is used to select and style the active link or any other element. It is activated by the user.
An element becomes active when the user clicks on the link or the element and presses down the mouse button.
The :active pseudo-class is used on the <a> and <button> elements. This pseudo-class also targets the elements containing an activated element, and form elements being activated through <label> element.
The :link, :hover, or :visited pseudo-classes override the definition that is specified by the :active pseudo-class. For styling links appropriately, the :active rule must be placed after all other link-related rules (:link, :visited, :hover, :active).
note
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.
INFO
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>Practice
What is the purpose of the :active selector in CSS and where can it be used?