Auteur: Jérôme Forget. Publié le 11 février 2007.
Les pseudo-classes et les pseudo-éléments permettent de créer des styles qui n'apparaissent pas dans la structure du document XHTML. Cela permet d'ajouter des styles sur des événements ou des actions (la coloration d'un lien déjà visité, le survol d'un lien avec le curseur, ...) qui ne peuvent pas être prévus dans le document XHTML.
Les pseudo-classes et les pseudo-éléments sont notés avec une syntaxe spéciale reconnaissable par les deux points (:).
Les pseudo-classes de lien sont utilisées pour différencier visuellement les liens déjà visités des liens non visités. Les deux pseudo-classes de lien sont :
Avec ces pseudo-classes, vous pouvez colorer les liens visités et les non visités comme ceci :
a:link {
color: blue;
background: white;
}
a:visited {
color: purple;
background: grey;
}
Ces pseudo-classes dynamiques sont activées en fonction des interactions de l'utilisateur. La pseudo-classe :hover est activée lorsque le curseur de la souris survole un élément.
a:hover {
color: red;
}
tr:hover {
background-color: #dfdfdf;
}
a:active {
color: orange;
}
input:focus {
background-color: #dfdfdf;
}
Microsoft Internet Explorer 6 et inférieur ne supporte les pseudo-classes que sur les liens (l'élément <a href="">). Il ne permet pas d'utiliser :hover ou :focus sur d'autres éléments.
Pour les situations où vous voulez sélectionner des éléments en fonction de leur langue, utilisez la pseudo-classe :lang(). Elle permet de sélectionner tous les éléments qui sont marqués d'un attribut lang="". Par exemple, la règle suivante va mettre en italique tous les éléments en langue anglaise :
*:lang(en) { font-style: italic; }
Prenez l'habitude d'indiquer tout texte en langue étrangère dans votre document XHTML. L'attribut lang="" peut être employé sur n'importe quelle balise. Pour trouver le bon code de langue, référez-vous à la norme ISO 639.