: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
undtext-emphasis-color
. - Erlaubte SVG-Attribute sind
fill
undstroke
. - Die Alphakomponente der erlaubten Stile wird ignoriert. Stattdessen wird die Alphakomponente des nicht-
:visited
-Zustands des Elements verwendet. In Firefox wird, wenn die Alphakomponente0
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()
undquerySelectorAll()
— geben immer ein "leeres" Ergebnis zurück, selbst wenn es besuchte Links im Dokument gibt. Für die genannten Methoden ist diesnull
oder eine leereNodeList
.
Hinweis: Weitere Informationen zu diesen Einschränkungen und den dahinterliegenden Gründen finden Sie unter Privacy and the :visited selector.
Syntax
: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
<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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
- Privacy and the :visited selector
- Pseudoklassen für Links:
:link
,:active
,:hover