:visited

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

Probieren Sie es aus

p {
 font-weight: bold;
}
a:visited {
 color: forestgreen;
 text-decoration-color: hotpink;
}

<p>Pages that you might have visited:</p>
<ul>
 <li>
 <a href="https://developer.mozilla.org">MDN Web Docs</a>
 </li>
 <li>
 <a href="https://www.youtube.com/">YouTube</a>
 </li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
 <li>
 <a href="https://developer.mozilla.org/missing-1">Random MDN page</a>
 </li>
 <li>
 <a href="https://example.com/missing-1">Random Example page</a>
 </li>
</ul>

Von :visited und unbesuchten :link-Pseudoklassen definierte Stile können von nachfolgenden Benutzeraktions-Pseudoklassen (:hover oder :active) mit mindestens gleicher Spezifität überschrieben werden. Um Links angemessen zu stylen, platzieren Sie die :visited-Regel nach der :link-Regel, aber vor den :hover- und :active-Regeln, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active. Die :visited-Pseudoklasse und die :link-Pseudoklasse 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 können:

• 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 Alpha-Komponente der erlaubten Stile wird ignoriert. Stattdessen wird die Alpha-Komponente des Nicht-:visited-Zustands des Elements verwendet. In Firefox wird der im :visited-Stil gesetzte Stil vollständig ignoriert, wenn die Alpha-Komponente 0 ist.
• Obwohl diese Stile das Erscheinungsbild der Farben für den Endbenutzer ändern können, wird die Methode window.getComputedStyle eine Falschinformation liefern und immer den Wert der Nicht-:visited-Farbe zurückgeben.
• Das <link>-Element wird niemals durch :visited erfasst.
• DOM-Methoden, die Elemente über CSS-Selektoren erfassen — wie querySelector() und querySelectorAll() — werden immer ein "leeres" Ergebnis zurückgeben, selbst wenn es besuchte Links in einem Dokument gibt. Für die genannten Methoden bedeutet dies null oder eine leere NodeList.

Syntax

:visited {
 /* ... */
}

Beispiele

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

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

Browser-Kompatibilität

Siehe auch

• Datenschutz und der :visited-Selektor
• Link-bezogene Pseudoklassen: :link, :active, :hover