W3docs
de
Anmelden

CSS :visited Pseudo-Klasse

Die :visited CSS-Pseudo-Klasse wählt bereits besuchte Links aus und formatiert sie. Lesen Sie mehr und üben Sie anhand von Beispielen.

Die :visited-Pseudo-Klasse trifft auf Links (<a>-Elemente mit einem href) zu, die der Benutzer bereits besucht hat. Sie verwenden sie, um besuchten Links ein anderes Erscheinungsbild als nicht besuchten zu verleihen — ein klassischer UX-Hinweis, der Lesern zeigt, welche Seiten sie bereits geöffnet haben.

Diese Seite behandelt, worauf :visited zutrifft, die strengen (und ungewöhnlichen) Einschränkungen, die Browser für die Stilgebung damit auferlegen, warum diese Einschränkungen existieren und wie man es mit den anderen Link-Zuständen in der richtigen Reihenfolge kombiniert.

a:visited {
  color: #8ebf42;
}

So funktioniert es

Ein Link gilt als „besucht", wenn seine Ziel-URL im Browserverlauf gespeichert ist. Der Browser wendet :visited-Stile automatisch an — es ist kein JavaScript oder Markup erforderlich. Sobald der Benutzer den Link anklickt (oder die URL zuvor besucht hat), wechselt der entsprechende Link zu seinem besuchten Stil.

Nur <a>-Elemente mit einem href-Attribut können auf :visited zutreffen. Ein Anker ohne href (z. B. <a>text</a>) wird als Platzhalter behandelt und trifft niemals auf :link oder :visited zu.

Warum nur wenige Eigenschaften formatiert werden können

Historisch gesehen konnte :visited fast jede Eigenschaft ändern. Das stellte sich als ein ernsthaftes Datenschutzproblem heraus: Eine Seite konnte Tausende von außerhalb des Sichtbereichs liegenden Links anordnen und getComputedStyle (oder Layout-Nebeneffekte) verwenden, um zu erkennen, welche als „besucht" gerendert wurden — und damit effektiv Teile des Browserverlaufs des Benutzers ohne Erlaubnis auszulesen.

Um dieses Problem zu schließen, beschränken moderne Browser :visited auf ausschließlich Farb-Eigenschaften und geben beim berechneten Stil falsche Werte zurück, sodass Skripte den Unterschied nicht erkennen können. Deshalb bewirkt das Festlegen von etwas wie einem background-image oder die Änderung der Box-Größe bei :visited stillschweigend nichts.

Die Eigenschaften, die Browser bei :visited noch erlauben:

Zwei zusätzliche Regeln machen diese sicher:

  • Die Änderung muss direkt von :visited stammen; man kann beispielsweise den Link bei :link nicht transparent machen und einen Hintergrund nur bei :visited sichtbar werden lassen.
  • Man kann rgba()/hsla() nicht mit teilweiser Transparenz verwenden, um den Zustand zu verraten, und der Alpha-Kanal wird faktisch ignoriert.

Wenn Sie eine reichhaltigere Stilgebung benötigen, die vom Link-Zustand abhängt, wenden Sie diese auf einen Zustand an, der nicht :visited ist — wie :link, :hover oder :focus.

Die LVHA-Reihenfolge

Wenn Sie alle vier Link-Zustände formatieren, ist die Reihenfolge der Regeln aufgrund von CSS-Spezifitätsgleichheiten wichtig. Die Konvention lautet Link, Visited, Hover, Active (zu merken als „LoVe HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* visited   */
a:hover   { color: #666666; }  /* mouse over */
a:active  { color: #cc0000; }  /* being clicked */

Wenn Sie :hover vor :visited setzen, würde ein besuchter Link seine Hover-Farbe nie anzeigen, da die spätere, gleich spezifische :visited-Regel gewinnen würde.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :visited Syntax

:visited {
  css declarations;
}

Beispiel für den :visited-Selektor:

CSS :visited Code-Beispiel

<!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>
Probier es selbst »

Beispiel für den :visited-Selektor mit nicht besuchten, besuchten, Hover- und aktiven Links:

:visited Code-Beispiel

<!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>
Probier es selbst »

Verwandte Selektoren

  • :link — formatiert Links, die noch nicht besucht wurden.
  • text-decoration — wird häufig mit Link-Zuständen kombiniert, um Unterstreichungen hinzuzufügen oder zu entfernen.

Übung

Übung
Was macht der :visited-Selektor in CSS?
Was macht der :visited-Selektor in CSS?
Was this page helpful?