CSS :active Selector

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:

Supported Browsers:

Google Chrome 1
Edge 12
Firefox 1
Safari 1
Opera 5

Explore