Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les pseudo-classes

Les pseudo-classes

Les pseudo-classes permettent d'appliquer des styles à des éléments XHTML lorsqu'un événement survient (exemple : le survol d'un lien avec la souris, au moment du click etc.). Bon c'etait une brève introduction. Maintenant passons au détails

L'utilisation des sélecteurs de pseudo-classes avec les liens

Avant d'aborder les pseudo-classes on va apprendre à modifier la façon dont les liens apparaissent par défaut (en bleu et souligné). Pour supprimer le trait de soulignement, il suffit d'utiliser la propriété CSS text-decoration et pour changer la couleur on se sert de la propriété CSS de formatage de texte color :

a {
text-decoration: none; /* supprimer les traits de soulignement */
color: green; /* des liens en vert au lieu du bleu */
}

La modélisation des liens est loin d'être finie, il nous reste encore à définir d'autres éléments :

Pour modéliser les liens en fonction des évènements précités. Il faut recourir à la notion des pseudo-classes. Je vais essayer de les déployer en suivant un ordre chronologique :

On va modéliser tout d'abord l'aspect des liens (élément <a> avec attribut href). Pour ce faire, utilisez la pseudo-classe :link avec l'élément <a> pour cibler uniquement les vrais liens (les ancres nommées avec la balise <a> ne sont pas concernées). Exemple :

a:link {
text-decoration: none; /* supprimer les traits de soulignement */
color: green; /* des liens en vert au lieu du bleu */
}

Notez qu'on met l'élément XHTML suivi immédiatement sans espace par la pseudo-classe. En matière de sélecteurs CSS, la plupart des gens confondent les deux éléments a et :link à tort. En fait les deux sélecteurs "a" et "a:link" se différencient :

Lien survolé par la souris (a:hover)

La pseudo-classe :hover associée à la balise <a>, permet de personnaliser l'aspect des liens lors du passage de la souris au-dessus du lien. Exemple :

a:hover { /* Quand le visiteur passe la souris au-dessus du lien*/ 
text-decoration: underline; /* lien souligné au passage de la souris */
color: red; /* au passage de la souris, le lien aura une couleur rouge */
}

Ce pseudo-format a l'avantage de fonctionner avec la plupart des éléments XHTML (en-têtes, paragraphes, citations, listes etc.). Mais quand il s'agit du navigateur de Microsoft, les problèmes ne manquent pas : Internet Explorer 6 n'interprète a:hover que si elle est associée à la balise <a>, pour Internet Explorer 7 ce problème a été résolu. Exemple avec un autre élément XHTML :

h1:hover {
color: green;
text-decoration: underline;
}

Lien actif (a:active)

La pseudo-classe :active permet de définir l'aspect des liens au moment du click. Généralement l'effet n'est pas suffisamment visible, car il dure pour un très petit instant après le clic. Pour faire durer l'effet cliquez deux fois en maintenant le bouton gauche de la souris enfoncé après le deuxième clic. Ou bien cliquez sur le lien avec le bouton droit de votre souris.

a:active { /* Quand le visiteur clique sur le lien */
color: #00FF00;
font-size: 1.1em;
}

Cette pseudo-classe a la faculté de fonctionner avec d'autres balises (p, h1, ul etc.), Après plusieurs essais sur différents navigateurs je me suis rendu compte que ceci est valable pour les versions récentes des navigateurs Netscape, Firefox, K-Meleon, Opera, Safari et Mozilla, mais pas pour Internet Explorer 6 ou 7.

Lien "focalisé" (:focus)

La pseudo-classe :focus permet de spécifier l'apparence du lien lorsqu'il reçoit le focus. Bon qu'est-ce que cela veut bien dire Le focus vient du verbe anglais "to focus" qui signifier "se focaliser" c'est-à-dire se concentrer. Le focus dans le domaine informatique désigne l'attention d'un système d'exploitation ou d'un logiciel. C'est-à-dire sur quel élément d'une interface (bouton, barre, fenêtre etc.) le programme est focalisé pour y effectuer les commandes reçues de l'utilisateur. On peut attribuer le focus à un élément soit par la souris ou la touche tabulation. Exemple :

a:focus {
color: green;
font-size: 1.2em;
}

Il y a une forte ressemblance entre les deux pseudo-classes :focus et :active, mais je peux vous aider à les faire distinguer

La pseudo-classe :focus peut aussi être exploitée avec les formulaires. On peut par exemple changer la couleur d'arrière-plan d'une zone de texte lorsqu'elle reçoit le focus. C'est-à-dire lorsque le curseur s'y place dedans. Exemple :

input:focus {
background-color: #00FFFF;
text-transform: uppercase;
}

D'une façon détaillée, les éléments XHTML concernés par la pseudo-classe :focus sont : les liens avec attribut href ; les champs de saisie (textarea, <input type="text" />), la zone de mot de passe et les boutons.

A noter que la pseudo-classe :focus n'est pas reconnue par Internet Explorer 6 et 7. En plus ces deux derniers utilisent l'état focus à tort pour la pseudo-classe :active. Ceci dit que lorsqu'un lien obtient le focus par la touche tabulation. Il revêt le style définit dans le sélecteur de pseudo-classe a:active.

Lien visité (a:visited)

L'usage de la pseudo-classe :visited est strictement réservé aux liens, il sert à personnaliser l'aspect des liens qui ont été visités, pour que l'internaute ne se perd pas lors de sa navigation. Par défaut les liens visités sont représentés par un violet méchant qu'il convient de modifier :

a:visited { /* Quand le visiteur a déjà visité le lien */
text-decoration: line-through; /* les liens visités seront barrés,
je crois que c'est plus méchant  comme style */ 
}

Pensez à réserver pour les liens visités des couleurs dont l'intensité est légèrement inférieure à celle des liens non encore visités. Ainsi vous aurez des liens différenciés et un design soigné.

Sachez qu'un lien visité peut retrouver son aspect initial. En fait les navigateurs arrivent à identifier les liens visités grâce à l'historique qu'ils créent dans leur cache. Ainsi pour que les liens visités reprennent leur statut initial, il suffit de vider le cache d'historique puis actualiser la page (F5 ou ALT+R) :

Syntaxe abrégée des pseudo-classes

Etant destinées principalement aux liens. Vous pouvez raccourcir la syntaxe des pseudo-classes en omettant la balise <a> sous cette forme :

:link {
text-decoration: none;
}
:visited {
color: green;
}
:hover {
color: red;
}

Mais lorsque vous ciblez par les pseudo-classes d'autres éléments XHTML autre que les liens, vous devez préciser la balise, sous cette forme :

textarea:focus {
background-color: yellow;
}

Le prochain chapitre portera sur un sujet plus ou moins similaire : les sélecteurs de pseudo-elements :first-letter et first-line.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau