Chapitre 910 | Un mémo sur l’ordre LVHA

La règle LVHA en CSS

LVHA est l’ordre dans lequel il faut écrire les pseudo-classes d’un lien (<a>) en CSS pour qu’elles fonctionnent correctement ensemble.

Ordre	Pseudo-classe	Signification
L	:link (ou juste a)	Lien non visité
V	:visited	Lien déjà visité
H	:hover	Lien survolé par la souris
A	:active	Lien en cours de clic

Pourquoi cet ordre est important

Ces pseudo-classes ont toutes la même spécificité. Donc si plusieurs s’appliquent en même temps à un lien (par exemple un lien visité et survolé), c’est la dernière déclarée dans le fichier CSS qui l’emporte — pas forcément celle qui a le plus de sens.

Si :hover est écrit avant :visited, un lien visité restera dans sa couleur « visité » même en survol, car :visited passe après et gagne.

Exemple correct (ordre LVHA)

a {
  color: blue;        /* L - Link */
}
a:visited {
  color: purple;      /* V - Visited */
}
a:hover {
  color: red;          /* H - Hover */
}
a:active {
  color: orange;       /* A - Active */
}

Avec cet ordre, le survol (:hover) fonctionne toujours, même sur un lien déjà visité.