:visited CSS sélecteur

Définition de la CSS :visited.

La pseudo-classe CSS :visited permet d'assigner des propriétés CSS à une balise HTML dont le lien a déjà été visité et à ses fils.

Exemple de syntaxe CSS :visited :
a:visited{
  /* propriétés Css pour le lien visité */
}
identifiant:visited{
  /* propriétés Css pour le lien visité */
}

Les propriétés modifiables avec la pseudo-classe CSS :visited sont limitées.
La pseudo-classe CSS :visited est associée généralement aux propriétés CSS :

  • : quand le lien est cliqué.
  • : quand le curseur survole le lien.
  • : quand le lien a le focus.
  • : lien normal et non visité.
Pseudo-classes à utiliser pour charter un lien :
a:link{}
a:visited{}
a:hover{} 
a:focus{}
a:active{}
/* L'ordre de déclaration des états doit être respecté, c'est celui du W3C */

Conditions d'application de la CSS :visited.

La pseudo-classe feuille de style :visited CSS est applicable sur la balise HTML ou XHTML .

Problème d'interprétation de :visited en Css.

La pseudo-classe feuille de style :visited ne pose aucun problème d'interprétation.

Règles de syntaxes CSS pour :visited.

Info complémentaire sur :visited

Attention, la pseudo-classe CSS :visited a une écriture un peu spéciale,
:visited est toujours précédée de ":".

La pseudo-classe :visited CSS ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML STYLE, mais dans une balise HTML ou XHTML ou dans une feuille de style externe.

Exemple d'écriture CSS :visited dans une balise STYLE
<STYLE>
a:visited {}
</STYLE>

Attention à l''écriture de :visited

Par définition la pseudo-classe CSS :visited ne concerne que les liens, il n'est donc pas nécessaire de mettre un identifiant de balise A devant, pour des questions de performance.

Code CSS :
a:visited {} /* Déconseillé mais certain préfère le mettre  */
:visited {} /* Conseillé */

Cependant vous pouvez lui associer un identifiant de class, d'id s'ils sont associés à une balise A.
Dans le cas ci-dessous, l'identifiant est collé à ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les liens qui ont "identifiant".

Code CSS :
.identifiant:visited { /* Propriétés css */ }
#identifiant:visited { /* Propriétés css */ }

Dans le cas ci-dessous, l'identifiant est espacé de ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les liens dont le parent est "identifiant".

Exemple de code :
.identifiant :visited { /* Propriétés css */ } #identifiant :visited { /* Propriétés css */ }

Evolution de la syntaxe CSS de :visited.

Evolution pour des raisons de sécurité (2010)

Anciennement l'ensemble des propriétés étaient modifiables, mais pour des raisons de sécurité, les propriétés modifiables par la pseudo-classe CSS :visited ne se limitent plus qu'aux couleurs :

  • color,
  • background-color,
  • border-color,
  • outline-color,
  • column-rule-color.

D'autre part, certains navigateur, comme Chrome et Firefox semblent faire une différence entre un lien avec ancre et sans ancre.

Compatibilités navigateurs du sélecteur :visited

Equivalence de la CSS :visited en HTML.

La pseudo-classe CSS :visited peut remplacer en HTML l'attribut VLINK de la balise HTML .

Votre avis sur la définition :visited en CSS

Votez pour la définition CSS :visited

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/visited-css-selector.html Votes: 4.4 / 5 - 29 votes
Cliquez sur une étoile pour voter.