CSS :active Pseudo-Klasse
Die CSS-Pseudo-Klasse :active zum Stylen aktiver Links einsetzen. Erklärung und Beispiele.
Die CSS-Pseudo-Klasse :active wählt ein Element aus und gestaltet es, während es vom Benutzer aktiviert wird — meistens der kurze Moment zwischen dem Drücken der Maustaste auf einem Link oder Button und dem Loslassen. Diese Seite erklärt, wie :active funktioniert, warum die Reihenfolge der Link-Regeln wichtig ist, und zeigt ausführbare Beispiele für Links, Buttons und andere Elemente.
Ein Element wird aktiv, wenn der Benutzer die primäre Maustaste darauf drückt (und bleibt aktiv, bis die Taste losgelassen wird). Auf Touchscreens gilt es, während das Element berührt wird.
:active wird am häufigsten für die Elemente <a> und <button> verwendet, kann aber jedes Element ansprechen. Es trifft auch auf ein Element zu, das ein aktiviertes Element enthält, sowie auf Formularsteuerelemente, die über ihr <label> aktiviert werden.
Warum die Reihenfolge der Regeln wichtig ist
Die Pseudo-Klassen :link, :visited und :hover können die von :active gesetzten Stile überschreiben, da die Kaskade Regeln gleicher Spezifität so auflöst — die zuletzt passende Regel gewinnt. Damit der aktive Zustand sichtbar bleibt, sollten Link-Regeln in genau dieser Reihenfolge aufgeführt werden (zu merken als LVHA):
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover { color: #2980b9; } /* mouse over */
a:active { color: #8ebf42; } /* being clicked */:active muss nach :link, :visited und :hover stehen, sonst würden die früheren Regeln es überdecken.
Verwechsle :active nicht mit :focus. Während :active gilt, solange ein Element aktiviert wird (z. B. während eines Mausklicks), gilt :focus, wenn ein Element den Tastaturfokus oder programmatischen Fokus erhält.
Auf Systemen mit Mehrtastenmäusen legt CSS3 fest, dass der :active-Zustand durch die primäre Eingabetaste (in der Regel die linke Maustaste) ausgelöst wird.
Version
Syntax
CSS :active Pseudo-Klasse Beispiel
:active {
css declarations;
}Beispiel der :active Pseudo-Klasse:
CSS :active Pseudo-Klasse Code-Beispiel
<!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>Beispiel der :active Pseudo-Klasse mit dem <a> Tag:
CSS :active Pseudo-Klasse, Code-Beispiel 2
<!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>Im folgenden Beispiel klicke auf den Text, um zu sehen, wie sich die Farbe ändert.
Beispiel der :active Pseudo-Klasse mit dem <div> Tag:
CSS :active Pseudo-Klasse, weiteres Code-Beispiel
<!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>Beispiel von :active auf einem <button>:
Die Kombination von :active mit :hover und :focus ist eine übliche Methode, um Buttons einen vollständigen Satz interaktiver Zustände zu geben. Die :active-Regel unten verleiht dem Button einen "gedrückten" Look, solange die Maustaste gehalten wird.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #1c87c9;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #156a9e;
transform: translateY(2px);
}
</style>
</head>
<body>
<h2>:active on a button</h2>
<button>Press me</button>
</body>
</html>Wichtige Hinweise
:activevs.:focus.:activegilt nur, solange das Element gedrückt wird;:focusbleibt bestehen, solange das Element den Tastaturfokus oder programmatischen Fokus hält. Verwende:focus(oder:focus-visible) für die Tastaturzugänglichkeit — verlasse dich nie allein auf:active, da es für Tastaturbenutzer nicht erreichbar ist.- Kein visuelles Feedback entfernen. Wenn
:active,:hoverund:focusgemeinsam gestaltet werden, verstehen Benutzer, dass ein Element interaktiv ist. - Spezifität ist ebenfalls wichtig. Die Regelreihenfolge löst nur Gleichstände zwischen Selektoren gleicher Spezifität auf. Ein spezifischerer Selektor anderswo kann dennoch gewinnen, daher sollten Link-Regeln auf dem gleichen Spezifitätsniveau bleiben.