CSS :active Pseudo Class
Practice Your Knowledge
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 style definethat 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).
Version ¶
Selectors Level 4
Selectors Level 3
Syntax¶
:active {
css declarations;
}Example of the: active pseudo-class:
<!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.web.com/">w3docs.com</a>
</body>
</html>Example of the :active pseudo-class with the <a> tag:
<!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:
<!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>
0 Comments
CAN FEEDBACK
Emoji