CSS :visited Pseudoklasse

Der :visited-Selektor wählt und formatiert besuchte Links auf der Seite aus.

Die :visited-Pseudoklasse wird angewendet, wenn der Link vom Benutzer besucht wurde.

Wenn wir versuchen, besuchten Links über eine Style-Eigenschaft (z. B. background-image) zu formatieren, funktioniert dies in modernen Browsern nicht. Style-Eigenschaften funktionieren jedoch korrekt, wenn wir eine andere Pseudoklasse verwenden.

Die mit diesem Selektor änderbaren Stile sind sehr begrenzt. Browser erlauben folgende Stile:

Webbrowser haben die Option, die Regelstile für die Pseudoklassen :link und :visited zu ignorieren, da die :visited-Pseudoklasse missbraucht werden kann und es dadurch möglich wäre, Informationen aus dem Browserverlauf des Besuchers auszulesen.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :visited-Syntax

css

:visited {
  css declarations;
}

Beispiel für den :visited-Selektor:

CSS :visited-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px;
      }
      a:visited {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <a href="https://www.w3docs.com">W3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

Try it Yourself »

Beispiel für den :visited-Selektor mit unbesuchten, besuchten, Hover- und Active-Links:

:visited-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #cccccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <p>Visit our
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>

Try it Yourself »

Praxis

Was bewirkt der :visited-Selektor in CSS?

Er repräsentiert einen Link, auf den der Benutzer noch nicht geklickt hat.Er repräsentiert einen Link, auf den der Benutzer geklickt hat.Er hilft beim Formatieren unbesuchter Links.Er hilft beim Formatieren besuchter Links.Er ändert die Textfarbe in einem Link.

CSS :visited Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :visited-Selektor: ​