CSS : aktiver Selektor
Beispiel
Wählen Sie den aktiven Link aus und gestalten Sie ihn:
a:active
{
background-color: yellow;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Der :activeSelektor wird verwendet, um den aktiven Link auszuwählen und zu gestalten.
Ein Link wird aktiv, wenn Sie darauf klicken.
Tipp: Der Selektor :active kann auf alle Elemente angewendet werden, nicht nur auf Links.
Tipp: Verwenden Sie die :link -Auswahl, um Links zu nicht besuchten Seiten zu gestalten, die :visited -Auswahl, um Links zu besuchten Seiten zu gestalten, und die :hover -Auswahl, um Links zu gestalten, wenn Sie mit der Maus darüber fahren.
Hinweis: :active MUSS nach :hover (falls vorhanden) in der CSS-Definition kommen, um wirksam zu sein!
| Ausführung: | CSS1 |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
| Selector | |||||
|---|---|---|---|---|---|
| :active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS-Syntax
:active {
css declarations;
}
Mehr Beispiele
Beispiel
Wählen und formatieren Sie ein <p>-, <h1>- und <a>-Element, wenn Sie darauf klicken:
p:active, h1:active, a:active {
background-color: yellow;
}
Beispiel
Nicht besuchte, besuchte, Hover- und aktive Links auswählen und gestalten:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Beispiel
Style-Links mit verschiedenen Styles:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Verwandte Seiten
CSS-Tutorial: CSS-Links
CSS-Tutorial: CSS-Pseudoklassen