: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 beispielsweise einen Button), das von der Benutzerin oder dem Benutzer aktiviert wird. Bei der Verwendung einer Maus beginnt die "Aktivierung" typischerweise, wenn die Benutzerin oder der Benutzer die primäre Maustaste drückt.
Probieren Sie es aus
Die :active
-Pseudoklasse wird häufig auf <a>
- und <button>
-Elementen verwendet. Weitere häufige Ziele dieser Pseudoklasse sind Elemente, die in einem aktivierten Element enthalten sind, sowie Formularelemente, die über das zugehörige <label>
aktiviert werden.
Stile, die durch die :active
-Pseudoklasse definiert werden, werden durch jede nachfolgende linksbezogene Pseudoklasse (:link
, :hover
oder :visited
) mit mindestens gleicher Spezifität überschrieben. Um Links angemessen zu gestalten, platzieren Sie die :active
-Regel nach allen anderen linksbezogenen Regeln, wie es durch die LVHA-Reihenfolge definiert ist: :link
— :visited
— :hover
— :active
.
Hinweis:
Auf Systemen mit Mehrtastenmäusen spezifiziert CSS, dass die :active
-Pseudoklasse nur auf die primäre Taste angewendet werden darf; bei rechtshändigem Gebrauch ist dies typischerweise die linke Taste.
Syntax
:active {
/* ... */
}
Beispiele
Aktive Links
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
/* 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
<form>
<label for="my-button">My button: </label>
<button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Ergebnis
Spezifikationen
Specification |
---|
HTML # selector-active |
Selectors Level 4 # active-pseudo |
Browser-Kompatibilität
BCD tables only load in the browser