Pseudo-classe en CSS : cibler un état sans toucher au HTML

Un élément HTML n'est jamais figé : un lien peut être survolé, une case peut être cochée, un champ peut être vide ou en erreur. Les pseudo-classes donnent à CSS la capacité de réagir à ces états, sans jamais toucher au balisage.

Elles font partie des outils les plus utilisés du langage, souvent avant même que le mot "pseudo-classe" ne soit connu, tant :hover ou :first-child apparaissent tôt dans l'apprentissage de CSS.

Définition

Une pseudo-classe est un mot-clé ajouté à un sélecteur, précédé d'un seul deux-points, qui cible un élément selon un état ou une position particulière, plutôt que selon sa balise, sa classe ou son attribut.

Exemples courants

/* état : au survol de la souris */
a:hover {
  text-decoration: underline;
}

/* état : champ actuellement en focus */
input:focus {
  border-color: #4a90d9;
}

/* position : premier enfant du parent */
li:first-child {
  font-weight: bold;
}

/* position : nième enfant, ici tous les pairs */
tr:nth-child(2n) {
  background-color: #f5f5f5;
}

Certaines pseudo-classes réagissent à une interaction, comme :hover ou :focus. D'autres décrivent une position dans une liste d'enfants, comme :first-child, :last-child ou :nth-child(), qui accepte une formule pour cibler un élément sur N.

Un seul deux-points, jamais deux

La syntaxe d'une pseudo-classe utilise toujours un seul deux-points, contrairement au Pseudo-élément qui en utilise deux. Cette distinction n'est pas cosmétique : une pseudo-classe cible un élément qui existe déjà dans le HTML, tandis qu'un pseudo-élément crée une portion de rendu qui n'a pas d'équivalent dans le balisage, comme le premier caractère d'un paragraphe ou un contenu injecté avant un élément.

Combiner les pseudo-classes

Plusieurs pseudo-classes peuvent s'enchaîner sur le même sélecteur pour affiner la cible, par exemple a:hover:not(.desactive) qui applique un style au survol, sauf sur les liens désactivés. L'ordre d'écriture entre pseudo-classes n'a pas d'incidence sur le résultat.

Pseudo-classes de formulaire

Les formulaires disposent d'un jeu de pseudo-classes dédié, qui reflète l'état réel d'un champ sans écrire une seule ligne de JavaScript. :required cible un champ obligatoire, :valid et :invalid réagissent à la validation native du navigateur, et :checked cible une case cochée ou un bouton radio sélectionné. Ces pseudo-classes permettent de construire des retours visuels immédiats, comme une bordure verte sur un champ correctement rempli, sans dépendre d'un script pour vérifier la valeur à chaque frappe. Elles se combinent naturellement avec :hover et :focus pour couvrir l'ensemble des états qu'un champ traverse, de la première saisie jusqu'à la validation finale du formulaire. Notre formation HTML et CSS détaille cette validation native pas à pas, pour construire des formulaires qui donnent un retour visuel clair sans dépendre du JavaScript.

/* champ obligatoire non rempli, en rouge */
input:required:invalid {
  border-color: #e63946;
}

/* case cochée, fond coloré sur le label associé */
input:checked + label {
  background-color: #eaf3ff;
}

Questions fréquentes

Non, les pseudo-classes font partie de la spécification CSS et du navigateur qui l'implémente. On ne peut pas en créer une personnalisée comme on créerait une nouvelle classe HTML.

Oui, une pseudo-classe s'applique à tout élément qui correspond à l'état ou à la position décrite au moment donné, ce qui peut concerner un seul élément comme plusieurs simultanément. Le navigateur réévalue cette correspondance en continu, si bien que le style apparaît et disparaît automatiquement selon les changements d'état.

C'est souvent la pseudo-classe :active qui est en jeu : elle ne s'applique que pendant le temps très court où l'élément est activement pressé, et disparaît dès que le clic est relâché. Ce comportement est volontaire : il confirme visuellement qu'une action a bien été prise en compte par l'interface.