CSS : pseudo-classe :visited
Le sélecteur :visited sélectionne et met en forme les liens déjà visités sur la page.
La pseudo-classe :visited s'applique lorsque l'utilisateur a déjà visité le lien.
Si nous essayons d'ajouter du style aux liens visités en leur attribuant une propriété de style (par ex. background-image), cela ne fonctionnera pas dans les navigateurs modernes. Cependant, les propriétés de style fonctionneront correctement si nous utilisons une autre pseudo-classe.
Les styles modifiables via ce sélecteur sont très limités. Les navigateurs autorisent les styles suivants :
- color
- background-color
- border-color
- outline color
- column-rule-color
- les parties couleur de fill et stroke
Les navigateurs web peuvent ignorer les styles définis pour les pseudo-classes :link et :visited, car cette dernière peut être détournée pour extraire des informations depuis l'historique de navigation de l'utilisateur.
Version
Syntaxe
Syntaxe CSS de :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>Exemple du sélecteur :visited avec des 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>Pratique
Que fait le sélecteur :visited en CSS ?