À retenir
- Elles ciblent un état ou une position plutôt qu'un nom.
- Elles commencent toujours par un simple symbole deux-points (
:). - Elles permettent de rendre une interface dynamique sans utiliser de programmation complexe (JavaScript).
En développement web (CSS), une pseudo-classe est un mot-clé que l'on attache à un sélecteur pour modifier le style d'un élément uniquement lorsqu'il se trouve dans un état particulier. Par exemple, au lieu de colorer tous les boutons en rouge, on peut décider qu'un bouton devient rouge uniquement quand l'utilisateur passe sa souris dessus.
Étymologie
Le terme vient du préfixe grec pseudo- (« faux » ou « trompeur »). On l'appelle ainsi car elle agit comme une classe CSS classique (pour appliquer du style), mais elle n'apparaît pas physiquement dans le code HTML ; elle est générée « virtuellement » par le navigateur en fonction du contexte.
Exemples d'usage
:hover: s'active quand le curseur de la souris survole un élément.:visited: change l'apparence d'un lien si l'utilisateur a déjà consulté cette page.:nth-child(3): permet de cibler précisément le troisième élément d'une liste sans lui donner de nom spécifique.
Cas d'usage
Les pseudo-classes interviennent dès qu'une page web doit réagir à l'utilisateur (interactivité) ou à la structure du document. On les utilise pour créer des menus réactifs, mettre en évidence des champs de formulaires sélectionnés (:focus), ou alterner les couleurs des lignes d'un tableau sans modifier le code HTML.
Bonnes pratiques
Pensez toujours à l'accessibilité : si vous modifiez le style au survol (:hover), prévoyez aussi un style pour la navigation au clavier (:focus). De plus, respectez l'ordre préconisé par les standards (Link, Visited, Hover, Active) pour éviter que certaines règles n'en écrasent d'autres par erreur.
Synonymes
Antonymes
Conseil
Pour bien débuter, apprenez d'abord les trois plus courantes : :hover, :active et :focus. Ce sont les piliers de l'interactivité en CSS qui vous permettront de donner instantanément une impression de finition professionnelle à vos projets.
Questions fréquentes
Quelle est la différence avec un pseudo-élément ?
Une pseudo-classe cible un état de l'élément entier (ex: survol), alors qu'un pseudo-élément cible une partie précise du contenu (ex: la première lettre d'un paragraphe).
Pourquoi mon :hover ne marche pas sur mobile ?
Sur les écrans tactiles, il n'y a pas de curseur physique ; le survol est souvent simulé par un premier clic, ce qui peut rendre l'expérience utilisateur confuse.