CSS :link Pseudo-Klasse

Die :link-Pseudo-Klasse wählt und stylt nicht besuchte Links — Links, auf die der Benutzer noch nicht geklickt hat (oder die der Browser aus seinem Verlauf gelöscht hat). Sie ist eine der vier „Link-Zustands"-Pseudo-Klassen, mit denen du steuern kannst, wie Links aussehen, während ein Benutzer mit ihnen interagiert.

Diese Seite erklärt, was :link trifft, wie es sich vom einfachen a-Selektor unterscheidet, warum die Reihenfolge der Link-Regeln wichtig ist, welche Browser-Datenschutzbeschränkungen verwandte Pseudo-Klassen betreffen, und zeigt ausführbare Beispiele für jeden Link-Zustand.

Was :link trifft

Die :link-Pseudo-Klasse trifft jedes nicht besuchte <a>-, <area>- oder <link>-Element das ein href-Attribut besitzt. Ein <a> ohne href ist kein Hyperlink und wird weder von :link noch von :visited getroffen.

/* Style every unvisited link */
a:link {
  color: #1c87c9;
  text-decoration: underline;
}

Ein Link befindet sich jeweils in genau einem von zwei Verlaufszuständen: Er ist entweder nicht besucht (:link) oder besucht (:visited). Diese beiden Pseudo-Klassen schließen sich gegenseitig aus — ein einzelner Link kann niemals beide gleichzeitig erfüllen.

:link vs. der einfache a-Selektor

Dies ist eine häufige Quelle von Verwirrung. Der Unterschied liegt im Geltungsbereich:

• a wählt jedes <a>-Element aus, unabhängig davon, ob es ein href hat oder welchen Verlaufszustand es besitzt.
• a:link wählt nur <a>-Elemente, die ein href haben und nicht besucht sind.

/* Applies to every <a>, including those without an href */
a {
  font-family: sans-serif;
}

/* Applies only to real, unvisited hyperlinks */
a:link {
  color: #1c87c9;
}

Verwende das einfache a für Basis-Typografie, die für alle Anker gilt. Verwende a:link, wenn du nur nicht besuchte Hyperlinks ansprechen möchtest — zum Beispiel, um sie von besuchten zu unterscheiden.

Die LVHA-Reihenfolge: Warum Regelreihenfolge wichtig ist

Die vier Link-Pseudo-Klassen — :link, :visited, :hover und :active — können alle gleichzeitig auf dasselbe Element zutreffen. Da sie dieselbe Spezifität (0,1,0) teilen, gewinnt die zuletzt passende Regel im Quellcode. Das Schreiben in der falschen Reihenfolge bewirkt, dass eine spätere Regel eine frühere lautlos aufhebt.

Die sichere, konventionelle Reihenfolge ist LVHA — Link, Visited, Hover, Active (Merkwort: „LoVe, HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* already visited */
a:hover   { color: #095484; }  /* pointer over the link */
a:active  { color: #666666; }  /* being clicked */

Warum diese Reihenfolge funktioniert:

• :hover kommt nach :link und :visited, sodass die Hover-Farbe unabhängig davon sichtbar ist, ob der Link besucht wurde oder nicht.
• :active kommt zuletzt, sodass es während des kurzen Moments eines Klicks gewinnt, auch wenn :hover gleichzeitig zutrifft.

Wenn du :link und :hover umgekehrt hättest, würde die :link-Farbe die Hover-Farbe bei nicht besuchten Links überschreiben, und das Hover-Verhalten würde scheinbar nichts bewirken.

Spezifität

:link hat eine Spezifität von (0,1,0) — eine Pseudo-Klasse. Das entspricht der Spezifität von :visited, :hover, :focus und :active, weshalb die Reihenfolge so wichtig ist (siehe LVHA oben). Das Hinzufügen eines Typ-Selektors erhöht die Spezifität auf (0,1,1):

/* specificity (0,1,1) — type + pseudo-class */
a:link {
  color: #1c87c9;
}

/* specificity (0,2,1) — type + class + pseudo-class — wins */
a.nav-link:link {
  color: #ff6600;
}

Tastaturfokus und Barrierefreiheit

:link und :visited decken Maus- und Zeigerinteraktionen ab, aber Tastaturbenutzer navigieren Links mit der Tab-Taste. Style auch den :focus-Zustand, damit Tastaturbenutzer einen klaren visuellen Indikator sehen:

a:link    { color: #1c87c9; }
a:visited { color: #8ebf42; }
a:hover   { color: #095484; }
a:focus   { outline: 2px solid #095484; outline-offset: 2px; }
a:active  { color: #666666; }

Syntax

selector:link {
  /* CSS declarations */
}

Die gebräuchlichste Form ist a:link, aber :link ist auf jedem Element gültig, das ein Hyperlink sein kann:

a:link    { color: #1c87c9; }
area:link { outline: 2px dashed #1c87c9; }

Beispiele

Einfaches Styling nicht besuchter Links

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <a href="https://www.w3docs.com">w3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

Alle vier Link-Zustände in LVHA-Reihenfolge

Dieses Beispiel wendet verschiedene Farben auf alle vier Link-Zustände an. Fahre mit der Maus darüber oder klicke den Link, um jeden Zustand in Aktion zu sehen.

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

Mehrere Link-Stile mit klassenbasierten Pseudo-Klassen

Jeder Link unten demonstriert eine andere CSS-Eigenschaft, die sich beim Hover ändern kann, kombiniert mit :link und :visited für den Standard- und besuchten Zustand.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px 0 10px;
        font-weight: bold;
      }
      a.one:link    { color: #ccc; }
      a.one:visited { color: #095484; }
      a.one:hover   { color: #8ebf42; }

      a.two:link    { color: #ccc; }
      a.two:visited { color: #095484; }
      a.two:hover   { font-size: 150%; }

      a.three:link    { color: #ccc; }
      a.three:visited { color: #095484; }
      a.three:hover   { background: #8ebf42; }

      a.four:link    { color: #ccc; }
      a.four:visited { color: #095484; }
      a.four:hover   { font-family: monospace; }

      a.five:link    { color: #095484; text-decoration: none; }
      a.five:visited { color: #095484; text-decoration: none; }
      a.five:hover   { text-decoration: overline underline; }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <p>
      <a class="one"   href="#">This link changes color</a>
      <a class="two"   href="#">This link changes font-size</a>
      <a class="three" href="#">This link changes background-color</a>
      <a class="four"  href="#">This link changes font-family</a>
      <a class="five"  href="#">This link changes text-decoration</a>
    </p>
  </body>
</html>

Browser-Kompatibilität

:link wird in allen modernen Browsern unterstützt und ist seit CSS1 Teil von CSS. Es gibt keine bekannten Kompatibilitätslücken bei der grundlegenden Verwendung. Die oben beschriebenen Datenschutzbeschränkungen für :visited sind seit 2010 in allen wichtigen Browsern vorhanden.

Verwandte Themen

• :visited — Style Links, die der Benutzer bereits geöffnet hat.
• :hover — Style ein Element, während der Zeiger darüber ist.
• :active — Style einen Link in dem Moment, in dem er geklickt wird.
• :focus — Style einen Link, wenn er den Tastaturfokus erhält.
• text-decoration — Steuere die Unterstreichung und andere Link-Dekorationen.
• color — Lege die Textfarbe von Links in jedem Zustand fest.
• Das <a>-Tag — das HTML-Element, das :link am häufigsten anspricht.

Übungen