Florence Maurice

Probleme beim Stylen des :visited-Zustands vermeiden

Geschrieben am: 9.5.2023

Wenn ich unterrichte, zeige ich die Dinge immer in deutlichen Farben. Und letztens wollte ich deutlich zeigen, wie man den :visited-Zustand von Links styled. Allerdings war das Ergebnis nicht so, wie ich erwartet hatte.

Mein Beispiel war denkbar banal. Ich hatte einen Link, den ich anklickte, damit er besucht ist, und einen nicht besuchten Link auf eine Fantasy-Adresse. Und den besuchten Link wollte ich, damit es ganz deutlich wird, mit einem gelben Hintergrund hinterlegen.

So weit so einfach, dachte ich.

a:link { }
a:visited { background-color: yellow}

Allerdings wurde der besuchte Link nicht gelb. Er blieb wie er war. Die Entwicklertools halfen mir auch nicht weiter, denn da fand ich die Formatierung, die allerdings nicht wirkte.

Also hab ich bei developer.mozilla.org nachgesehen. Und die Lösung ist einfacher: Damit die Hintergrundfarbe beim besuchten Link funktioniert, muss man dem Link im Normalfall eine Hintergrundfarbe spendieren. Das Folgende klappt also:

a:link { background-color: white;}
a:visited { background-color: yellow}

Ein Beispiel zum Ausprobieren für den :visited-Zustand gibts bei CodePen.