: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:

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:visited
:visited privacy: selector does not match <link> elements
Restrict CSS properties allowed in a statement using :visited for privacy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch