:active pseudo class in CSS

CSSWeb DevelopmentFront End Technology

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

 Live Demo

<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

 Live Demo

<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

 Live Demo

<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

 Live Demo

<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

ChromeFirefoxEdgeIESafariOpera
11Yes415
raja
Published on 19-Sep-2018 18:41:57
Advertisements