Pseudo Klassen: hover, link, active, focus, visited, any link

Elemente ohne spezielles HTML

Pseudo-Klassen entstehen bei Phantom-Zuständen eines Elements, meist durch Benutzeraktionen, aber auch bei bestimmten Sprachen und basieren auf Informationen außerhalb des DOM-Baums. Pseudo-Klassen können an beliebigen Stellen der Selektor-Kette stehen (ein Pseudo-Element wie ::before oder ::after hingegen nicht).

Pseudo-Elemente sprechen Teile eines Elements ohne HTML-Markup an, z.B. die erste Zeile eines Absatzes (::firstLine) und können Elemente ohne HTML-Markup einfügen (::before, ::after) oder einfach nur stylen (::marker – die Marker-Box von Listen). Sie können nicht inline in einem style-Attribut vereinbart werden und nur am Ende der Selektor-Kette stehen.

Sowohl Pseudo-Klassen als auch Pseudo-Elemente können nicht inline in das HTML-Element gesetzt werden – denken wir einmal an ein hover.

Pseudo-Klassen werden durch einen Doppelpunkt vom Selektor getrennt: a:hover oder li.activeItem:hover. Dabei darf kein Leerzeichen zwischen dem Element und dem Doppelpunkt stehen.

:hover und :focus sind dynamische Pseudo-Klassen, mit denen CSS auf Benutzeraktionen wie das Hovern mit der Maus und die Wahl eines Eingabefeldes mit dem Cursor oder Tastatur durch Ändern des Aussehen reagiert. :hover und :focus triggern auch einfache Animationen durch CSS transition.

Pseudo-Klassen ansprechen

Im HTML-Code können diese Elemente gar nicht erreicht werden, denn es gibt kein HTML-Tag für „beim Hovern“ oder „hier warst du schon mal“. Also kann die Darstellung nicht durch ein style-Attribut beeinflusst werden.

a:link { text-decoration: none; color: purple; }

a:link { text-decoration: none; color: purple; }

a:visited { text-decoration: none; color: purple; }

a:active { background-color: #8FBC8F }

li:hover { background-color: #8FBC8F }

input:focus { background-color: lavender }

Pseudo-Klassen für Links

Link-Pseudo-Klassen fangen die Zustände eines Links ab: Maus liegt über dem Link, Link wurde schon besucht. Diese CSS-Eigenschaften wurden schon früh von allen Browsern unterstützt.

1 a:link { background-color: thistle }
2 a:visited { background-color: lavender }
3 a:hover { background-color: pink } 
4 a:focus { background-color: aquamarine; color: black }
5 a:active { background-color: oldlace }
6 a:visited:hover{background-color:gray;color:white }

Die Reihenfolge der Pseudo-Selektoren muss wie hier :link, :visited, :hover, :focus, :active sein. Ansonsten überschreibt z.B. :visited den Selektor :hover.

CSS2 erlaubt eine weitere Differenzierung, bei der die Pseudo-Klassen hintereinander geschaltet sind. Wenn der Browser diese Funktionalität unterstützt, muss der Hintergrund eines bereits besuchten Links blau werden und seine Schrift weiß, wenn die Maus über ihm hovert:

a:visited:hover { background-color: gray; color: white }

hover für Touchscreens

Ein :hover-Selektor sollte nicht ohne Weiteres für wichtige Aktionen eingesetzt werden, denn auf Smartphones und Tabletts gibt es kein :hover. Der Finger toucht ein Element oder tippt es doppelt – aber es gibt kein Überstreichen wie mit der Maus.

Tabletts und Smartphones übersetzen ein hover über einem Link direkt in einen Mausklick.

Wenn :hover für Animationen eingesetzt wird – z.B. einen Link anzeigen, wenn die Maus über einem Bild hovert –, kann Javascript den Effekt beim Berühren des Elements für Touchscreens nachziehen. Dann sind Javascript-Events wie ontouchstart und ontouchend das Äquivalent zum Hovern mit der Maus.

.hoverbild {position: relative; }
.hoverbild figcaption { opacity: 0; transition: opacity 0.5s}
.hoverbild:hover figcaption { opacity: 1}
.fadeInOnTouch { opacity: 1}

<script>
var hoverbild = document.querySelector(".hoverbild");
hoverbild.ontouchstart = function () {
   this.querySelector("figcaption").classList.add("fadeInOnTouch");
}
hoverbild.ontouchend = function () {
   this.querySelector("figcaption").classList.remove("fadeInOnTouch");
}
</script>

CSS hover und Javascript touchstart kombinieren

hover – nicht nur bei Links

Früher unterstützten die meisten Browser das Ändern einer CSS-Eigenschaft beim Hovern mit der Maus nur bei a-Tags. Heute klappt es auch mit anderen HTML-Elementen: Listen, Tabellenzellen und Texte in Absätzen.

@media (max-width:360px) {
	td:nth-child(3) { display:none}
}
tr:nth-child(odd) {background: gainsboro;}
tr:hover { background: ivory}

So erhalten z.B. Tabellenzeilen mit tr : hover einen farbigen Hintergrund, wenn die Maus über ihnen hovert und die Navigationsleiste zeig ein Pull-Down oder – wie hier – ein Fly-Out-Menü.

Aber wie oben unter Die hover-Falle: Auf dem Touchscreen – dem Tablett und dem Smartphone – gibt es kein :hover.

Eine Navigation darf darum nicht mehr ohne Erkennung von Touch Devices auf :hover beruhen. Ein responsives Menü für die Navigation kann ohne Javascript, nur mit HTML und CSS animiert werden.

ul.col ul { 
   display: none
}
ul.col li:hover ul {
   list-style: none;
   display: block; position: absolute;
   left: 14em; z-index: 10; margin-top: -2em;
   width: 12em
}

So kommen wir dann mit CSS an eine aufpoppende Navigation ganz ohne Javascript. Das funktioniert auch in Internet Explorer.

any-link

any-link wirkt auf linkende Elemente (Elemente mit einem href-Attribut), egal, ob der Link schon besucht oder noch nicht besucht wurde.

Stile für :any-link wirken z.B. auch, wenn ein a-Element einen Block von Elementen umspannt: Mit HTML5 darf ein a-Tag um ein oder mehrere Block-Elemente gelegt werden.

<a href="/tutorial/css-tabs.html">
    <h4>CSS Tabs ohne Javascript</h4>
    <p>Tabs nur mit HTML input, … </p>
</a>

:focus

Die Pseudoklasse :focus entdeckt, ob ein Feld aktiviert ist – entweder durch einen Klick mit der Maus in das Feld oder durch eine Navigation mit dem Tabulator der Tastatur.

input#name:focus { background-color: var(accent-color) }

focus mit Attribut-Selektor

input[type="password"]:focus { background-color: var(accent-color) }

Wenn das Eingabefeld in den Fokus kommt, wird es farbig hinterlegt.