Was a:hover bedeutet, weiss jeder, der mal die Nase an eine CSS-Datei gehalten hat. Die Pseudo-Klassen a:visited, a:focus und a:active sind weit weniger bekannt. Mir war jedenfalls lange nicht klar, was die Angaben genau bewirken.

a:hover

Über den Selektor a spricht man im CSS einen Link an, mit a:hover lässt sich dem Link ein Effekt mitgeben, der auftritt, sobald die Maus drüberfährt. In Beispiel unten ändert sich die Farbe des Links von Rot in Blau.

a {color: red;}
a:hover {color: blue;}

For the record: Auf Touch-Geräten funktioniert der hover-Effekt nicht.

Was ist der Unterschied zwischen a und a:link?

In manchen CSS-Dateien findet man die Schreibweise a:link {…} anstatt von a {…}.
Die Pseudo-Klasse a:link bezieht sich auf Anchor-Elemente, die ein href-Attribut haben. Was ein bisschen sinnfrei ist, denn dieses Attribut sollte jeder Link haben. Ein Link ist – ein Link und verweist immer auf eine interne oder externe URL.
Wenn nur eine Aktion durch Anklicken ausgelöst werden soll, ist button das Tag der Wahl. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars.

Wer korrektes HTML pflegt, kann also getrost a statt a:link schreiben.

a:visited

Die Pseudo-Klasse a:visited wird aktiv, sobald ein Link einmal angeklickt wurde. Der Nutzer kann so erkennen, wo er schon mal war. Bei Seiten mit vielen Inhalten und vielen Links kann das sehr hilfreich sein.

Ich wähle für den visited-Status meist eine etwas abgedunkelte Variante der Linkfarbe. Wenn die Haupt-Navigation nur wenige Elementen hat, nehme ich diese Links aus der Systematik heraus. Da man sie sowieso mehrfach anklickt, hat es meiner Meinung nach nicht so viel Sinn, den visited-Status in der Navigation zu kennzeichnen.

Übrigens: :visited und :hover lassen sich auch kombinieren:

a:visited:hover {
  color: purple;
}

a:focus

a:focus ist wichtig für die Navigation per Keyboard. Sobald der Nutzer per Tab-Taste einen Link erreicht, wechselt der Link in den focus-Zustand. Der Nutzer kann dadurch erkennen, welchen Link er gerade angesteuert (= im Fokus) hat.

Die Pseudo-Klassen :hover, :focus und :active können auch auf andere Elemente angewendet werden, zum Beispiel auf Formular-Elemente. Das Element reagiert dann nicht nur auf die Tastatur, sondern auch auf einen Mausklick.

a:active

a:active gibt dem Nutzer die Rückmeldung ”Du hast gerade diesen Link angeklickt”. Was auf den ersten Blick banal klingt, ist eine wichtige Hilfestellung für Nutzer, die unsicher sind oder motorische Probleme haben.

Das Verhalten dieses Link-Zustands ist ein wenig schwer zu beschreiben. Das Styling wird nur für einen extrem kurzen Moment sichtbar, nachdem der Link angeklickt wurde.

Am besten, ihr probiert es mal aus:

See the Pen Demo a:focus a:active deutsch by Kirsten (@netzialist) on CodePen.

Die Reihenfolge im CSS

Die Pseudo-Klassen müssen in der CSS-Datei in einer bestimmten Reihenfolge geschrieben werden. Stimmt die Reihenfolge nicht, werden die Angaben überschrieben. Käme beispielsweise a:hover nach a:visited, würde die Angaben für a:hover die Angaben für a:visited überschreiben.

Die richtige Reihenfolge ist: link, visited, hover, focus, active.

a {color:red; }

a:visited {color:crimson; }

a:hover {color:blue; }

a:focus {background-color:red; color:white;}

a:active {text-decoration:underline;}

Fazit

Pseudo-Klassen für Links geben den Besuchern wichtige Rückmeldungen beim Navigieren durch eine Seite. Wir können dadurch das Risiko eingrenzen, dass die Besucher aus Versehen auf Links klicken und irgendwo landen, wo sie eigentlich gar nicht hin wollten. Menschen, die den Faden verloren haben, machen einfach den Tab zu und verlassen die Seite.
Es ist deshalb sinnvoll, im CSS immer alle Link-Zustände zu definieren und keinen auszulassen.