Übersicht
Die Pseudoklasse :active entspricht jedem Element, dass vom Benutzer aktiviert wurde. Beim Mauszeiger ist das die Zeitspanne, wo die Taste gedrückt gehalten wird. Deshalb wird sie meistens bei den Elementen <a> und <button> Eingesetzt, kann aber auch für jedes andere Element genutzt werden.
Die Stile können von weiteren Pseudoklassen überschrieben werden: :link, :hover und :visited. Deshalb ist es wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active.
:active Pseudoklasse nur dem Hauptknopf zugewiesen wird; bei Mäusen für Rechtshänder ist dies typischerweise der linkeste Knopf.Beispiel
HTML
<body> <h1>:active CSS selector example</h1> <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p> </body>
CSS
body { background-color: #ffffc9 }
a:link { color: blue } /* unbesuchte Links */
a:visited { color: purple } /* besuchte Links*/
a:hover { font-weight: bold } /* Benutzer fährt mit der Maus darüber */
a:active { color: lime } /* aktive Links */
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| Selectors Level 4 Die Definition von ':active' in dieser Spezifikation. |
Arbeitsentwurf | Keine Änderung |
| Selectors Level 3 Die Definition von ':active' in dieser Spezifikation. |
Empfehlung | Keine Änderung |
| CSS Level 2 (Revision 1) Die Definition von ':active' in dieser Spezifikation. |
Empfehlung | Keine Änderung |
| CSS Level 1 Die Definition von ':active' in dieser Spezifikation. |
Empfehlung | Standard Wert definiert |
Browser Kompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 1.0 | 1.0 (1.7 oder früher) | 4.0 | 5.0 | 1.0 |
Unterstützung bei anderen Elementen als <a> |
1.0 | 1.0 (1.7 oder früher) | 8.0 | 7.0 | ? |
| Merkmal | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 1.0 | 1.0 (1.0) | 6.0 | 6.0 | 1.0[1] |
Unterstützung bei anderen Elementen als <a> |
1.0 | 1.0 (1.0) | ? | ? | ? |
[1] Standardmäßig verwendet Safari Mobile nicht den :active Status, außer es gibt einen touchstart Event Handler für das entsprechende Element oder das <body> Element.