:active

Springen zu:
  1. Übersicht
  2. Beispiel
  3. Spezifikationen
  4. Browser Kompatibilität
  5. Siehe auch

Übersicht

Die Pseudoklasse :active entspricht jedem Element, das 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.

Hinweis: Auf Systemen mit Mäusen mit mehreren Knöpfen, definiert CSS 3, dass die :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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 6Safari iOS Vollständige Unterstützung 1Samsung Internet Android ?
Non-a element supportChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, virtusmaior, jwhitlock, yckart, Sebastianz, webtobesocial
Zuletzt aktualisiert von: SJW,