:visited
La pseudo-classe :visited
permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.
a:visited {
color: #4b2f89;
}
Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens (:link
, :hover
, et :active
) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : :visited
doit être utilisée après une règle basée sur :link
, mais avant les autres (:link
— :visited
— :hover
— :active
).
Restrictions
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
,outline-color
,column-rule-color
- Les attributs SVG autorisés sont
fill
andstroke
. - La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est
0
, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité). - Bien qu'on puisse modifier la couleur d'un lien, la méthode
window.getComputedStyle
mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités.
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
Exemples
CSS
a:visited {
color: #00ff00;
}
HTML
<p>
<a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited">
Cette page est visitée
</a>
</p>
<p>
<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/">
Essayez celle-ci peut-être ?
</a>
</p>
Résultat
Spécifications
Specification |
---|
HTML Standard # selector-visited |
Selectors Level 4 # link |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
Les pseudo-classes relatives aux liens :