Ordre des pseudo-classes des liens

On ne se soucie pas assez de signaler les différents états d’un lien. C’est un défaut d’ergonomie d’autant plus dommage que l’hyperlien est le fondement de la navigation sur le Web et qu’il est facile d’améliorer cela. Faciliter le repérage du lien pointé ou actif, faciliter l’identification des contenus déjà visités [1]... cela se fait en quelques lignes de CSS, avec les « pseudo-classes ». Mais attention à l’ordre !

Les pseudo-classes constituent des classes prédéfinies en CSS. Elles s’appliquent à certains éléments dont l’état peut changer. Les plus connues et plus populaires concernent les liens hypertextes qui possèdent plusieurs états : visité, actif et non visité, sans oublier le survol et le focus. À chacun correspond une pseudo-classe.

Il est important de déclarer ces pseudo-classes dans cet ordre :

1. link
2. visited
3. focus
4. hover
5. active

Par exemple, pour modifier la couleur des liens selon leur état :

En pratique, on commence par styler génériquement a { ... } et on s’en contente souvent. Quand on veut bien faire, on précise chaque état, distinctement : les liens visités avec a:visited { ... } puis liens les ciblés, avec ces trois pseudo-classes d’un coup : a:focus, a:hover, a:active { ... }.

La règle a:hover doit être placée après a:link et a:visited, sinon la cascade fera que la propriété color spécifiée sera cachée. Il est excessivement rare d’avoir à définir a:link.

Pour retenir cet ordre, l’astuce mnémotechnique habituelle est l’expression « LoVe HAte », — deux mots fameux que le terrifiant pasteur du film La Nuit du chasseur avait tatoués sur les phalanges de ses doigts —, où les lettres en majuscule signalent ici la première lettre de chaque pseudo-classe, dans le bon ordre... but what of :focus ? Pour s’en rappeler, n’oublions pas ce qui trouve naturellement sa place entre l’amour et la haine : « LoVe Fuck HAte ».
J’aimerais lui préférer une expression francophone plus simple et plus élégante, mais je n’ai pas encore trouvé mieux.