Un menu horizontal réactif

Introduction aux pseudo-classes

Des pseudo-classes? C'est pour me faire un pseudo-cours? 

Et je vous attribuerai des pseudo-points après une pseudo-évaluation. Dites, si nous parlions un peu plus sérieusement?

La notion de pseudo-classe

Lien visitéLa plupart des navigateurs permettent de distinguer, dans une page web, les liens qui ont déjà été visités de ceux qui ne l'ont pas encore été.

Dans l'illustration ci-contre, on voit que 

  • le lien vers KompoZer présente une couleur violette car il a déjà été visité.
  • le lien vers les deux autres logiciels sont en couleur bleue car ces liens n'ont pas encore été visités.

La couleur attribuée au contenu des balises <a> est donc susceptible d'être modifiée en fonction du comportement de l'utilisateur.

to click or not to click. Toute la question est là.

En tous les cas, il y a de la magie dans l'air. Voyons cela.

a.visited {color: #800080}

Lorsque le visiteur clique sur un lien, tout se passe comme si la balise <a> était affectée d'une nouvelle "classe" que nous pourrions appeler "visited" (visité, en anglais).

Avant: <a href="info.sio2.be/kpz">KompoZer</a>

Après: <a href="info.sio2.be/kpz" class="visited">KompoZer</a>

Vous racontez n'importe quoi. J'ai bien regardé le code dans une page où un lien avait été visité. Rien n'a été modifié. Aucune "classe" n'a été ajoutée.

Vous ne semblez pas avoir bien lu ce qui est écrit: "tout se passe comme si". Et voilà pourquoi nous parlons de "pseudo-classes".

À retenirLorsqu'un lien est cliqué, tout se passe comme si une nouvelle "classe" était attribuée à la balise <a> du lien. Cette nouvelle "classe" serait responsable de sa couleur après le clic.
Cette classe n'existe pas vraiment. C'est la raison pour laquelle on parle de "pseudo-classe".

Modifier la pseudo-classe "visited"

Il peut arriver que l'on souhaite qu'un lien visité présente une autre couleur que le violet proposé par défaut.

  • MenuSi nécessaire, ouvre le document menu.html
  • Visualise ce document dans ton navigateur.

A priori, les trois liens se présentent soulignés et en couleur bleue: ce sont les caractéristiques par défaut des liens.

  • Clique sur l'un des liens puis reviens à la même page pour constater la couleur du lien visité.
  • Ouvre l'éditeur de styles CasCadeS.
  • a:visitedÉtablis une nouvelle règle de style pour le sélecteur a:visited (pas d'espace entre a et :visited).
  • Définis le style de la manière suivante:
    • la couleur verte,
    • les caractères gras et
    • la suppression du soulignement (Décoration du texte "Normal").
  • Enregistre le document.
  • Visualise dans le navigateur.
  • Clique sur un lien puis reviens sur la page menu.html. Tu dois observer une présentation comme ci-dessous (liens 1 et 3 visités).
menu visité

Ah oui, joli... Mais si j'ai d'autres liens sur ma page, ils vont tous paraître en vert, en gras et non soulignés. Je veux un effet de ce type uniquement pour le menu.

Votre remarque me consterne. Je pensais que ce point avait déjà été envisagé à la page précédente. La solution doit être évidente.

Si l'on veut que seuls les liens qui font partie du menu soient concernés par les directives de style de a:visited , il faut
Modifier le sélecteur en a:visited #menu
Modifier le sélecteur en #menu a:visited
Il n'y a aucun moyen: c'est un piège
Il faut utiliser une autre pseudo-classe qui sera vue trois pages plus loin

Quand tu as obtenu l'effet souhaité pour la pseudo-classe "visited", passe à la page suivante. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...