CSS :active Pseudo Class

The :active wählt und stylt den aktiven Link oder ein anderes Element. Es wird vom Benutzer aktiviert.

Ein Element wird aktiv, wenn der Benutzer auf den Link oder das Element klickt und die Maustaste drückt.

:active pseudo-class wird mit den Elementen <a> und <button> verwendet.

:link, :hover oder :visited pseudo-classes überschreiben den durch :active pseudo-class definierten Stil.

Version

CSS1

Syntax

:active {
css declarations;
}

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      a:active {
      background-color: #8ebf42;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <a href="https://de.w3docs.com/">w3docs.com</a>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit dem Selector :active:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      a {
      color: #1c87c9;
      }
      a:active {
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und <a href="#">Satzindustrie</a>. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den <a href="#">elektronischen</a> Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie <a href="#">Aldus PageMaker</a> mit Versionen von Lorem Ipsum.</p>
  </body>
</html>

Versuch es selber!

Klicken Sie in dem angegebenen Beispiel auf den Text, um zu sehen, wie sich die Farbe ändert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 ist ein Blindtext...
    </div>
  </body>
</html>