Pseudo-classe :visited CSS

Définition et utilisation

CSS :visited Les pseudo-classes sont utilisées pour définir les styles des liens visités.

Astuce :Utilisez :link Définir le style du lien pour la page non visitée, en utilisant :hover Définir le style du lien au survol de la souris, en utilisant :active Définir le style du lien lors du clic.

Attention :Pour configurer correctement les styles des liens, veuillez utiliser :visited les règles doivent être placées après :link après les règles, mais avant :hover et :active avant les règles.

Les styles autorisés incluent :

  • couleur
  • couleur de fond
  • border-color (et les border-color de chaque côté)
  • couleur de contour
  • column-rule-color
  • text-decoration-color
  • text-emphasis-color
  • Propriétés SVG fill et stroke

Exemple

Exemple 1

Sélectionner et définir les styles des liens visités :

a:visited {
  color: pink;
}

Essayez-le vous-même

Exemple 2

Sélectionner et définir les styles des liens non visités, visités, au survol et actifs :

/* Lien non visité */
a:link {
  color: green;
}
/* Lien visité */
a:visited {
  color: green;
}
/* Lien au survol de la souris */
a:hover {
  color: red;
}
/* Lien actif */
a:active {
  color: yellow;
}

Essayez-le vous-même

Exemple 3

Définir différents styles pour les liens :

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Essayez-le vous-même

Syntaxe CSS

:visited {
  déclarations css;
}

Détails techniques

Version : CSS1

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette pseudo-classe.

Chrome Edge Firefox Safari Opera
1 12 2 3.1 9.6

Pages associées

Tutoriel :Lien CSS

Tutoriel :pseudo-classes CSS