: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 Pseudo-Klasse wird angewendet, nachdem der Benutzer den Link besucht hat. Aus Datenschutzgründen sind die Stiländerungen, die mit diesem Selektor vorgenommen werden können, stark eingeschränkt. Die :visited Pseudo-Klasse gilt nur für <a> und <area>-Elemente, die ein href-Attribut haben.

Probieren Sie es aus

Stile, die von den :visited und unbesuchten :link Pseudo-Klassen definiert werden, können durch nachfolgende Benutzeraktions-Pseudo-Klassen (:hover oder :active) mit mindestens gleicher Spezifität überschrieben werden. Um Links angemessen zu stylen, setzen Sie die :visited-Regel nach der :link-Regel, aber vor den :hover- und :active-Regeln, wie es die LVHA-Reihenfolge definiert: :link:visited:hover:active. Die :visited-Pseudo-Klasse und die :link-Pseudo-Klasse schließen sich gegenseitig aus.

Datenschutzbeschränkungen

Aus Datenschutzgründen begrenzen Browser streng, welche Stile Sie mit dieser Pseudo-Klasse anwenden können und wie sie verwendet werden können:

Hinweis: Für weitere Informationen zu diesen Einschränkungen und den Gründen dafür siehe Datenschutz und der :visited Selektor.

Syntax

css
:visited {
  /* ... */
}

Beispiele

Eigenschaften, die ansonsten keine Farbe haben oder transparent sind, können mit :visited nicht verändert werden. Von den Eigenschaften, die mit dieser Pseudo-Klasse festgelegt werden können, hat Ihr Browser wahrscheinlich nur einen Standardwert für color und column-rule-color. Wenn Sie also die anderen Eigenschaften ändern möchten, müssen Sie ihnen einen Basiswert außerhalb des :visited-Selectors geben.

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 Standard
# selector-visited
Selectors Level 4
# link

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch