CSS :active Selector

CSS :active selector is used to apply CSS styles to an element only when it is active. An element becomes active when you click on it. As soon as you finish clicking the element, these styles are completely removed from the element.

The p:active selector in the following example will add a yellow background to the <p> element as soon as you click on it:

Example:

p:active{
    background-color: yellow;
}

The :active selector in the following example sets a yellow background to the link when you click on it:

Example:

a:active{
    background-color: yellow;
}

You can also apply same styles to multiple elements when they are active by simply separating each element by a comma.

See this example:

Example:

h2:active, p:active, button:active{
    background-color: yellow;
}

You can connect two adjacent elements using the :active selector. It means that we can add styles to the second element while clicking on the first.

The :active selector in the following example will add a yellow background to the <p> element while clicking on its adjacent button.

Example:

button:active + p{
    background-color: yellow;
}

CSS Syntax

The syntax of the :active selector is as follows:

:active{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :active selector.