W3docs
fr
Se connecter

CSS :visited Pseudo-classe

La pseudo-classe CSS :visited sélectionne et stylise les liens déjà visités. Découvrez cette pseudo-classe et pratiquez avec des exemples.

La pseudo-classe :visited cible les liens (éléments <a> avec un attribut href) que l'utilisateur a déjà visités. Elle permet de donner aux liens visités une apparence différente des liens non visités — un repère UX classique qui indique aux lecteurs quelles pages ils ont déjà ouvertes.

Cette page explique ce que :visited sélectionne, les limites strictes (et inhabituelles) que les navigateurs imposent sur ce que vous pouvez styliser avec elle, pourquoi ces limites existent, et comment la combiner avec les autres états de lien dans le bon ordre.

a:visited {
  color: #8ebf42;
}

Comment ça fonctionne

Un lien est « visité » lorsque son URL de destination se trouve dans l'historique du navigateur. Le navigateur applique les styles :visited automatiquement — aucun JavaScript ni balisage particulier n'est nécessaire. Dès que l'utilisateur a cliqué dessus (ou a déjà visité l'URL auparavant), le lien correspondant bascule vers son style visité.

Seuls les éléments <a> avec un attribut href peuvent correspondre à :visited. Une ancre sans href (par exemple <a>text</a>) est traitée comme un espace réservé et ne correspond jamais à :link ni à :visited.

Pourquoi vous ne pouvez styliser que quelques propriétés

Historiquement, :visited pouvait modifier presque n'importe quelle propriété. Cela s'est avéré être une faille de confidentialité sérieuse : une page pouvait disposer des milliers de liens hors écran et utiliser getComputedStyle (ou des effets secondaires de mise en page) pour détecter lesquels étaient rendus comme « visités » — lisant ainsi efficacement des parties de l'historique de navigation de l'utilisateur sans permission.

Pour combler cette faille, les navigateurs modernes limitent :visited aux propriétés de couleur uniquement et mentent sur le style calculé afin que les scripts ne puissent pas détecter la différence. C'est pourquoi définir quelque chose comme une background-image ou modifier la taille de la boîte sur :visited ne fait silencieusement rien.

Les propriétés que les navigateurs autorisent encore sur :visited :

Deux règles supplémentaires rendent ces propriétés sûres :

  • Le changement doit provenir directement de :visited ; vous ne pouvez pas, par exemple, rendre le lien transparent avec :link et révéler un arrière-plan uniquement sur :visited.
  • Vous ne pouvez pas utiliser rgba()/hsla() avec une transparence partielle pour révéler l'état, et le canal alpha est effectivement ignoré.

Si vous avez besoin d'un stylisme plus élaboré dépendant de l'état du lien, appliquez-le à un état qui n'est pas :visited — tel que :link, :hover, ou :focus.

L'ordre LVHA

Lorsque vous stylisez les quatre états de lien, l'ordre des règles est important en raison des égalités de spécificité CSS. La convention est Link, Visited, Hover, Active (mémorisée comme « LoVe HAte ») :

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

Si vous placez :hover avant :visited, un lien visité n'afficherait jamais sa couleur de survol, car la règle :visited suivante, d'égale spécificité, l'emporterait.

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS :visited

:visited {
  css declarations;
}

Exemple du sélecteur :visited :

Exemple de code CSS :visited

<!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>
Essayez vous-même »

Exemple du sélecteur :visited avec les liens non visités, visités, survolés et actifs :

Exemple de code :visited

<!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>
Essayez vous-même »

Sélecteurs associés

  • :link — stylise les liens qui n'ont pas encore été visités.
  • text-decoration — souvent associé aux états de lien pour ajouter ou supprimer les soulignements.

Pratique

Pratique
Que fait le sélecteur :visited en CSS ?
Que fait le sélecteur :visited en CSS ?
Was this page helpful?