CSS :active Pseudo Class

The :active pseudo-class selects and styles 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 <a> and <button> elements.

:link, :hover, or :visited pseudo-classes override the style defined by the :active pseudo-class.

Version

CSS1

Syntax

:active {
css declarations;
}

Example

<!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>

Another example with the :active selector:

Example

<!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>

In the given example, click on the text to see how the color changes:

Example

<!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>



Related articles