CSS-Pseudoklasse :visited

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>

Datenschutzeinschränkungen

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

• Zulässige 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.
• Zulässige SVG-Attribute sind fill und stroke.
• Die Alpha-Komponente der zulässigen Stile wird ignoriert. Stattdessen wird die Alpha-Komponente des nicht-:visited-Zustands des Elements verwendet. Wenn die Alpha-Komponente in Firefox 0 ist, wird der in :visited festgelegte Stil vollständig ignoriert.
• Obwohl diese Stile das Erscheinungsbild von Farben für den Endbenutzer ändern können, wird die Methode window.getComputedStyle falsche Angaben machen und stets den Wert der nicht-:visited-Farbe zurückgeben.
• Das Element <link> wird niemals von :visited abgeglichen.
• DOM-Methoden, die Elemente über CSS-Selektoren abgleichen — wie querySelector() und querySelectorAll() — geben immer ein „leeres“ Ergebnis zurück, selbst wenn ein Dokument besuchte Links enthält. Bei den zuvor genannten Methoden ist dies jeweils null oder eine leere NodeList.

Syntax

:visited {
  /* ... */
}

Beispiele

Eigenschaften, die andernfalls keine Farbe hätten oder transparent wären, können nicht mit :visited geändert werden. Von den Eigenschaften, die mit dieser Pseudoklasse festgelegt werden können, verfügt Ihr Browser wahrscheinlich nur für color und column-rule-color über einen Standardwert. Wenn Sie also die anderen Eigenschaften ändern möchten, müssen Sie ihnen außerhalb des Selektors :visited 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

Browser-Kompatibilität

Siehe auch

• Datenschutz und der Selektor :visited
• Linkbezogene Pseudoklassen: :link, :active, :hover