totn CSS

CSS :active selector

This CSS tutorial explains how to use the CSS selector called :active with syntax and examples.

Description

The CSS :active selector allows you to target an element that is being activated (such as a link that is being clicked on).

Syntax

The syntax for the :active CSS selector is:

element:active { style_properties }

Parameters or Arguments

element
The element to target when the user activates it.
style_properties
The CSS styles to apply to the element when the user is activating it.

Note

  • The :active selector is a pseudo-class that allows you to target an element that is being activated.
  • Starting in IE4 and Opera 5, the :active selector could only used with <a> tags.

Browser Compatibility

The CSS :active selector has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the :active selector below, exploring examples of how to use this selector in CSS to apply styling to an element that is being activated.

With <a> tag

Let's look at a CSS :active example where we apply the :active selector to the <a> tag.

The CSS would look like this:

a:active { background: lightgrey; }

The HTML would look like this:

<div>
  <p>Here is a great site: <a href="https://www.checkyourmath.com/index.php">CheckYourMath.com</a></p>
</div>

When the <a> tag is not activated, it would look like this:

CSS

Then once you click on the link, the :active selector would style the <a> tag (for a very short time) as follows:

CSS

In this :active example, the link "CheckYourMath.com" will display with a light grey background only when it is activated (ie: clicked on). This effect will only last for a second or so.

Share on: