Pseudo-classes

Les pseudo-classes stylisent un état.

a:hover { color: #2563eb; }
input:focus { outline: 2px solid #0ea5e9; }
li:nth-child(odd) { background: #f8fafc; }

Utiles pour interaction, accessibilité et rythmes visuels.

Exemples d'états courants :

• :hover pour le survol souris
• :focus pour la navigation clavier
• :nth-child(...) pour alterner des styles dans une liste

Bien utilisées, elles évitent beaucoup de JavaScript inutile.

A retenir

Les pseudo-classes permettent de décrire l'état d'un élément sans changer le HTML. Elles sont indispensables pour rendre l'interface vivante et accessible.

Mini pratique

Ajoute un style :focus visible sur un bouton et un champ input. Teste ensuite la navigation au clavier avec la touche Tab.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.