Pseudo class is to show different state of an element or a css selector. Active pseudo class is to show that the element is in active state.
This pseudo class is mostly being associated with link and button or any other element which can be active.
For example if it is associated with link that the link is active.
Syntax
a:active { color:green;}Let's check the actual usage of :active pseudo class with different scenarios, as follows −
Example
<html>
<head>
<style>
a:active { color:green;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>Explanation
When you first time see the link it will be shown with normal link color (Blue) and the link will turn green if this link has been visited once.
Example
<html>
<head>
<style>
a:active {font-size:20px;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>Explanation
This will change the font size of the link to 20px while you click on the link.
Example
<html>
<head>
<style>
body:active {
background: seagreen;
}
</style>
</head>
<body>
<div>click anywhere in this window</div>
</body>
</html>Explanation
When you click anywhere on the screen the background color will change to seagreen.
Example
<html>
<head>
<style>
#thisButton:active { color: red}
</style>
</head>
<body>
<button id="thisButton">Click Me!!</button>
</body>
</html>Explanation
Font-color of button text will change to red while you click on the button.
Browser compatibility
| Chrome | Firefox | Edge | IE | Safari | Opera |
| 1 | 1 | Yes | 4 | 1 | 5 |