:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die :visited CSS Pseudoklasse wird angewendet, nachdem der Benutzer den Link besucht hat. Aus Datenschutzgründen sind die Stile, die mit diesem Selektor modifiziert werden können, stark eingeschränkt. Die Pseudoklasse :visited gilt nur für <a>- und <area>-Elemente, die ein href-Attribut besitzen.

Probieren Sie es aus

Stile, die durch die Pseudoklassen :visited und die unbesuchte :link definiert werden, können durch nachfolgende Pseudoklassen für Benutzeraktionen (:hover oder :active) mit mindestens gleicher Spezifität überschrieben werden. Um Links angemessen zu gestalten, sollten Sie die :visited-Regel nach der :link-Regel, aber vor den :hover- und :active-Regeln platzieren, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active. Die Pseudoklassen :visited und :link schließen sich gegenseitig aus.

Datenschutzbeschränkungen

Aus Datenschutzgründen beschränken Browser streng, welche Stile Sie mit dieser Pseudoklasse anwenden können und wie sie verwendet werden dürfen:

Erlaubte CSS-Eigenschaften sind color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color und text-emphasis-color.
Erlaubte SVG-Attribute sind fill und stroke.
Die Alphakomponente der erlaubten Stile wird ignoriert. Stattdessen wird die Alphakomponente des nicht-:visited-Zustands des Elements verwendet. In Firefox wird, wenn die Alphakomponente 0 ist, der im :visited gesetzte Stil vollständig ignoriert.
Obwohl diese Stile die Darstellung von Farben für den Endbenutzer ändern können, wird die Methode window.getComputedStyle falsche Angaben machen und immer den Wert der nicht-:visited-Farbe zurückgeben.
Das <link>-Element wird niemals durch :visited übereinstimmend erkannt.
DOM-Methoden, die Elemente mittels CSS-Selektoren abgleichen — wie querySelector() und querySelectorAll() — geben immer ein "leeres" Ergebnis zurück, selbst wenn es besuchte Links im Dokument gibt. Für die genannten Methoden ist dies null oder eine leere NodeList.

Hinweis: Weitere Informationen zu diesen Einschränkungen und den dahinterliegenden Gründen finden Sie unter Privacy and the :visited selector.

Syntax

css

:visited {
  /* ... */
}

Beispiele

Eigenschaften, die sonst keine Farbe haben oder transparent sind, können mit :visited nicht verändert werden. Bei den Eigenschaften, die mit dieser Pseudoklasse gesetzt werden können, hat Ihr Browser wahrscheinlich nur für color und column-rule-color standardmäßig Werte. Wenn Sie also die anderen Eigenschaften verändern möchten, müssen Sie ihnen außerhalb des :visited-Selektors einen Basiswert zuweisen.

HTML

html

<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>

CSS

css

a {
  /* Specify non-transparent defaults to certain properties,
     allowing them to be styled with the :visited state */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

Ergebnis

Spezifikationen

Specification
HTML # selector-visited
Selectors Level 4 # visited-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Privacy and the :visited selector
Pseudoklassen für Links: :link, :active, :hover