:active

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :active CSS Pseudoklasse repräsentiert ein Element (wie ein Button), das vom Benutzer aktiviert wird. Bei der Verwendung einer Maus beginnt die "Aktivierung" typischerweise, wenn der Benutzer die primäre Maustaste drückt.

Probieren Sie es aus

Die :active Pseudoklasse wird häufig auf <a> und <button> Elementen verwendet. Andere häufige Ziele dieser Pseudoklasse sind Elemente, die in einem aktivierten Element enthalten sind, und Formularelemente, die durch ihr zugehöriges <label> aktiviert werden.

Stile, die durch die :active Pseudoklasse definiert sind, werden durch jede nachfolgende, auf Links bezogene Pseudoklasse (:link, :hover, oder :visited) mit mindestens gleicher Spezifität überschrieben. Um Links richtig zu stylen, setzen Sie die :active Regel nach allen anderen, auf Links bezogenen Regeln, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active.

Hinweis: Auf Systemen mit Mäusen mit mehreren Tasten gibt CSS vor, dass die :active Pseudoklasse nur auf die primäre Taste angewendet werden muss; bei rechtshändigen Mäusen ist dies typischerweise die linke Taste.

Syntax

css
:active {
  /* ... */
}

Beispiele

HTML

html
<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

CSS

css
/* Unvisited links */
a:link {
  color: blue;
}
/* Visited links */
a:visited {
  color: purple;
}
/* Hovered links */
a:hover {
  background: yellow;
}
/* Active links */
a:active {
  color: red;
}

/* Active paragraphs */
p:active {
  background: #eee;
}

Ergebnis

Aktive Formularelemente

HTML

html
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

CSS

css
form :active {
  color: red;
}

form button {
  background: white;
}

Ergebnis

Spezifikationen

Specification
HTML Standard
# selector-active
Selectors Level 4
# the-active-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch