:visited

Exemple interactif

p {
  font-weight: bold;
}

a:visited {
  color: forestgreen;
  text-decoration-color: hotpink;
}

<p>Pages que vous avez peut-être consultées&nbsp;</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org/fr/">MDN Web Docs</a>
  </li>
  <li>
    <a href="https://www.youtube.com/YouTube">YouTube</a>
  </li>
</ul>
<p>Pages peu susceptibles d'être dans votre historique&nbsp;:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org/missing-1">Page MDN aléatoire</a>
  </li>
  <li>
    <a href="https://example.fr/missing-1">Page d'exemple aléatoire</a>
  </li>
</ul>

Les styles définis par les pseudo-classes :visited et non-visitées :link peuvent être écrasés par toute pseudo-classe d'action utilisateur suivante (:hover ou :active) ayant une spécificité au moins égale. Pour mettre en forme les liens correctement, placez la règle :visited après la règle :link mais avant les règles :hover et :active, comme défini par l'ordre LVHA : :link — :visited — :hover — :active. La pseudo-classe :visited et la pseudo-classe :link sont mutuellement exclusives.

Restrictions de vie privée

Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :

• Les propriétés CSS autorisées sont color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, et text-emphasis-color.
• Les attributs SVG autorisés sont fill et stroke.
• La composante alpha des styles autorisés sera ignorée. La composante alpha de l'état inverse de :visited de l'élément sera utilisée à la place. Dans Firefox, lorsque la composante alpha est 0, le style défini dans :visited sera totalement ignoré.
• Bien que ces styles puissent changer l'apparence des couleurs pour l'utilisateur·ice final·e, la méthode window.getComputedStyle mentira et retournera toujours la valeur de la couleur de l'état inverse de :visited.
• L'élément HTML <link> n'est jamais ciblé par :visited.
• Les méthodes DOM qui ciblent des éléments via des sélecteurs CSS — comme querySelector() et querySelectorAll() — retourneront toujours un résultat « vide » même s'il existe des liens visités dans un document. Pour les méthodes mentionnées, ce sera null ou une liste de nœuds (NodeList) vide, respectivement.

Syntaxe

:visited {
  /* ... */
}

Exemples

Les propriétés qui n'auraient autrement aucune couleur ou seraient transparentes ne peuvent pas être modifiées avec :visited. Parmi les propriétés qui peuvent être définies avec cette pseudo-classe, votre navigateur a probablement une valeur par défaut pour color et column-rule-color uniquement. Ainsi, si vous souhaitez modifier les autres propriétés, vous devrez leur donner une valeur de base en dehors du sélecteur :visited.

HTML

<a href="#lien-visité-de-teste"> Avez-vous déjà visité cette page&nbsp;? </a
><br />
<a href="">Vous avez déjà visité ce lien.</a>

CSS

a {
  /* Définir des valeurs par défaut non transparentes pour
     certaines propriétés, permettant de les styliser avec
     l'état :visited */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Vie privée et le sélecteur :visited
• Les pseudo-classes relatives aux liens :
  • :link,
  • :visited,
  • :hover,
  • :active.