Open In App

CSS :active Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements.

Syntax: 

:active{
    //CSS property
}

Example: In this example, The CSS: active pseudo-class targets the active state of elements. It applies green background color for the link and blue background color for the paragraph when clicked.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Active selector</title>
    <style>
        a:active {
            background-color: green;
        }
 
        p:active {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <h3>Active for link.</h3>
        Geeks for Geeks
    </a>
    <h3>Active for text.</h3>
    <p>Click Me!!</p>
</body>
 
</html>


Output: 

css-active.gif

Supported Browsers:

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Safari 1 
  • Opera 5

Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads