Pseudo-classe CSS `:visited`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Voir la compatibilité complète
En savoir plus

La pseudo-classe CSS :visited s'applique une fois que le lien a été visité par l'utilisateur·ice. Pour des raisons de vie privée, les styles pouvant être modifiés avec ce sélecteur sont très limités. La pseudo-classe :visited s'applique uniquement aux éléments HTML <a> et <area> qui possèdent un attribut href.

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.

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>

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 est ignorée. La composante alpha de l'état inverse de :visited de l'élément est utilisée à la place. Dans Firefox, lorsque la composante alpha est 0, le style défini dans :visited est totalement ignoré.
Bien que ces styles puissent changer l'apparence des couleurs pour l'utilisateur·ice final·e, la méthode window.getComputedStyle() ment et retourne 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 avec des sélecteurs CSS — comme querySelector() et querySelectorAll() — retournent toujours un résultat « vide » même s'il existe des liens visités dans un document. Pour les méthodes mentionnées, c'est null ou une liste de nœuds (NodeList) vide, respectivement.

Note : Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article Vie privée et le sélecteur :visited.

Syntaxe

css

:visited {
  /* … */
}

Exemples

Les propriétés qui n'ont autrement aucune couleur ou sont 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 devez leur donner une valeur de base en dehors du sélecteur :visited.

HTML

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

css

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

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