Comment appliquer des styles spécifiques à la page Web en cours dans un menu ? (2) Marquer la page en cours dans un menu de navigation

Pour éviter toute confusion, parlons plutôt de page ou rubrique "en cours", et pas de page ou rubrique "active".

Pour marquer la page en cours dans un menu, on ne pourra pas se reposer sur CSS uniquement. Il n'existe pas de pseudo-classe :current, et ce pour une bonne raison : le navigateur n'aurait aucun moyen fiable de reconnaitre quel lien pointe vers la page ou rubrique en cours. La page, passe encore, mais pour la rubrique c'est une autre paire de manche. En effet, le concept de rubrique ou "partie" ou "zone" n'a aucune équivalence technique en HTML.

Déterminer quels liens différencier visuellement des autres

C'est donc à vous de déterminer quels liens il faut différencier visuellement des autres, et de créer les styles CSS correspondants.

Concrètement, si on a une série de liens dans un menu, on pourra appliquer une classe spécifique au lien souhaité. Par exemple si j'ai trois liens vers les pages "À propos", "Contact" et "Mentions légales", et que je me trouve sur la page "Contact", je peux avoir le code HTML suivant :

 <a href="https://www.journaldunet.com/apropos.html">À propos</a> 
<a href="https://www.journaldunet.com/contact.html" class="en-cours">Contact</a> 
<a href="https://www.journaldunet.com/mentions.html">Mentions légales</a>

Et pour la page "Mentions légales", le code HTML devra être modifié ainsi :

<a href="https://www.journaldunet.com/apropos.html">À propos</a> 
<a href="https://www.journaldunet.com/contact.html">Contact</a> 
<a href="https://www.journaldunet.com/mentions.html" class="en-cours">Mentions légales</a>