CSS :link Pseudo-classe

La pseudo-classe :link sélectionne et stylise les liens non visités — les liens sur lesquels l'utilisateur n'a pas encore cliqué (ou que le navigateur a effacés de son historique). C'est l'une des quatre pseudo-classes d'« état de lien » que vous utilisez pour contrôler l'apparence des liens lors des interactions de l'utilisateur.

Cette page explique ce que :link correspond, comment elle diffère du sélecteur a nu, pourquoi l'ordre des règles de lien est important, quelles restrictions de confidentialité du navigateur affectent les pseudo-classes associées, et présente des exemples exécutables pour chaque état de lien.

Ce que :link correspond

La pseudo-classe :link correspond à chaque élément <a>, <area> ou <link> non visité qui possède un attribut href. Un <a> sans href n'est pas un hyperlien et n'est pas pris en compte par :link ni par :visited.

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

Un lien se trouve dans exactement l'un des deux états d'historique à la fois : il est soit non visité (:link), soit visité (:visited). Ces deux pseudo-classes sont mutuellement exclusives — un seul lien ne peut jamais correspondre aux deux en même temps.

:link vs le sélecteur a nu

C'est une source fréquente de confusion. La différence porte sur la portée :

• a sélectionne chaque élément <a>, qu'il possède ou non un href ou quel que soit son état d'historique.
• a:link sélectionne uniquement les éléments <a> qui ont un href et sont non visités.

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

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

Utilisez le sélecteur a nu pour la typographie de base applicable à toutes les ancres. Utilisez a:link lorsque vous devez cibler uniquement les hyperliens non visités — par exemple, pour les distinguer des liens visités.

L'ordre LVHA : pourquoi l'ordre des règles est important

Les quatre pseudo-classes de lien — :link, :visited, :hover et :active — peuvent toutes s'appliquer simultanément au même élément. Comme elles partagent la même spécificité (0,1,0), la dernière règle correspondante dans la source gagne. Les écrire dans le mauvais ordre fait qu'une règle ultérieure annule silencieusement une règle antérieure.

L'ordre sûr et conventionnel est LVHA — Link, Visited, Hover, Active (moyen mnémotechnique : « 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 */

Pourquoi cet ordre fonctionne :

• :hover vient après :link et :visited afin que la couleur de survol s'affiche que le lien ait été visité ou non.
• :active vient en dernier afin qu'il l'emporte pendant le bref instant d'un clic, même si :hover correspond également au même moment.

Si vous inversiez :link et :hover, la couleur de :link remplacerait la couleur de survol sur les liens non visités, et le survol semblerait ne rien faire.

Spécificité

:link a une spécificité de (0,1,0) — une pseudo-classe. C'est la même spécificité que :visited, :hover, :focus et :active, ce qui explique pourquoi l'ordre est si important (voir LVHA ci-dessus). L'ajout d'un sélecteur de type augmente la spécificité à (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;
}

Focus clavier et accessibilité

:link et :visited couvrent l'interaction à la souris et au pointeur, mais les utilisateurs de clavier naviguent entre les liens avec la touche Tab. Stylisez également l'état :focus, afin que les utilisateurs de clavier voient un indicateur visuel clair :

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; }

Syntaxe

selector:link {
  /* CSS declarations */
}

La forme la plus courante est a:link, mais :link est valide sur tout élément pouvant être un hyperlien :

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

Exemples

Style de base pour les liens non visités

<!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>

Les quatre états de lien avec l'ordre LVHA

Cet exemple applique des couleurs distinctes aux quatre états de lien. Survolez ou cliquez sur le lien pour voir chaque état en action.

<!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>

Styles de liens multiples avec des pseudo-classes ciblées par classe

Chaque lien ci-dessous illustre une propriété CSS différente pouvant changer au survol, combinée avec :link et :visited pour les états par défaut et visité.

<!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>

Compatibilité des navigateurs

:link est pris en charge par tous les navigateurs modernes et fait partie du CSS depuis CSS1. Il n'existe aucune lacune de compatibilité connue pour un usage de base. Les restrictions de confidentialité sur :visited décrites ci-dessus sont en place depuis 2010 dans tous les principaux navigateurs.

Sujets connexes

• :visited — styliser les liens que l'utilisateur a déjà ouverts.
• :hover — styliser un élément pendant que le pointeur est dessus.
• :active — styliser un lien au moment où il est cliqué.
• :focus — styliser un lien lorsqu'il reçoit le focus clavier.
• text-decoration — contrôler le soulignement et autres décorations de lien.
• color — définir la couleur du texte des liens dans chaque état.
• La balise <a> — l'élément HTML que :link cible le plus souvent.

Pratique