CSS :active Pseudo Class

The :active pseudo-class is used to select and style the active link or any other element. It is activated by user.

An element becomes active when the user clicks on the link or the element and presses down the mouse button.

The :active pseudo-class is used on the <a> and <button> elements. This pseudo-class also targets the elements containing an activated element, and form elements being activated through <label> element.

The :link, :hover, or :visited pseudo-classes override the style definethat is specified by the :active pseudo-class. For styling links appropriately, the :active rule must be placed after all other link-related rules (:link, :visited, :hover, :active).

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

On systems with multi-button mice, CSS3 defines that the :active selector should be applied only to the first button. But on right-handed mice, it should be applied to the leftmost button.

Version

Selectors Level 4

Selectors Level 3

Syntax

:active {
  css declarations;
}

Example of the :active pseudo-class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:active {
        background-color: #8ebf42;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <a href="https://www.w3docs.com/">w3docs.com</a>
  </body>
</html>

Try it Yourself »

Example of the :active pseudo-class with the <a> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
      a:active {
        background-color: #8ebf42;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>

Try it Yourself »

In the following example, click on the text to see how the color changes.

Example of the :active pseudo-class with the <div> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
      div:active {
        background-color: #666;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>