Open In App

CSS :active Selector

Last Updated : 29 Aug, 2024
Comments
Improve
Suggest changes
1 Likes
Like
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>
    <a href="https://www.geeksforgeeks.org/">
        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

V

Vishal_Khoda
Improve
Article Tags :

Explore

Lightbox