Pseudo-classes CSS
bien plus que :hover #2

17 septembre 2026

D'aussi longtemps que je me souviens, les technos web ont toujours eu une facheuse tendance à rendre les compétences que vous aviez acquises les 2 dernières années, complètement obsolètes. Entre css, media queries, php, jquery etc... Il n'est pa toujours évident de se tenir à jour pour faire face au rapide développement du domaine. D'autant plus ces dernières années, avec une montée en puissance de l'IA qui bouscule tout, pas toujours dans le meilleur sens.

C'est ce qui m'a amené à me poser des questions et à rechercher du contenu intéressant dans le domaine. Cet article fait suite à celui disponible ici : "Evolutions et modernités du css".

Les pseudo-classes et les formulaires

Les formulaires constituent probablement le domaine où les pseudo-classes démontrent le mieux leur intérêt.

CSS connaît déjà une quantité importante d'états :

input:required
input:optional
input:valid
input:invalid
input:in-range
input:out-of-range
input:disabled
input:enabled
input:read-only
input:read-write
input:placeholder-shown
input:checked

On peut donc construire une partie importante de l'interface d'un formulaire sans JavaScript.

Par exemple :

input:invalid {
    border-color: red;
}

input:valid {
    border-color: green;
}

Ou :

input:placeholder-shown {
    background: #f5f5f5;
}

La logique est particulièrement intéressante parce qu'elle repose sur l'état réel du contrôle, et non sur une classe que le développeur devrait maintenir manuellement.

:focus et :focus-visible : un détail qui compte

Pendant longtemps, on a vu des feuilles CSS contenant :

*:focus { outline: none; }

C'est généralement une mauvaise idée.

Le focus est essentiel pour les personnes qui naviguent au clavier.

:focus-visible permet de demander un indicateur visuel du focus lorsque le navigateur considère qu'il doit être visible :

button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

C'est un bon exemple de pseudo-classe qui permet de concilier esthétique et accessibilité plutôt que de supprimer purement et simplement le comportement natif.

POURQUOI UTILISER LES PSEUDO-CLASSES ?

Le premier argument est simple : elles permettent d'écrire moins de HTML.

Le deuxième avantage est la diminution du JavaScript nécessaire pour certaines interactions.

Un état comme :checked, :focus, :invalid, :disabled ou :has() peut parfois être géré directement par CSS.

Troisième avantage : la logique reste là où elle doit être.

Si une modification concerne uniquement la présentation d'un élément lorsqu'il est survolé, focalisé ou sélectionné, il est généralement logique que cette information soit traitée par CSS plutôt que par une fonction JavaScript qui ajoute et retire des classes.

Enfin, les pseudo-classes permettent d'écrire un CSS beaucoup plus déclaratif.

On ne demande pas au navigateur :

« lorsqu'un utilisateur fait ceci, exécute cette fonction, cherche cet élément, ajoute cette classe et modifie son apparence ».

On lui dit simplement :

« lorsqu'un élément est dans cet état, applique cette règle ».

C'est une différence assez fondamentale dans la manière de concevoir une interface.

Il ne faut cependant pas utiliser toutes les pseudo-classes

La puissance de CSS moderne ne signifie pas qu'il faut remplacer systématiquement les classes par des sélecteurs complexes.

Un sélecteur comme :

main > section:nth-child(3) > div:has(article:not(.featured)) ...

peut être parfaitement valide et pourtant devenir très difficile à maintenir.

Une classe explicite peut alors être préférable :

.section-news { ... }

La bonne approche n'est donc pas :

« les pseudo-classes sont meilleures que les classes ».

C'est plutôt :

utiliser l'information déjà disponible dans le document ou dans l'état de l'interface avant de créer artificiellement une nouvelle information.

C'est là que les pseudo-classes deviennent réellement intéressantes.

Pseudo-classe ou pseudo-élément ?

La confusion est fréquente.

Une pseudo-classe sélectionne un élément selon un état ou une condition :

a:hover
input:checked
li:first-child

Un pseudo-élément représente quant à lui une partie ou une abstraction d'un élément :

p::first-letter
p::before
p::after

La syntaxe permet généralement de les distinguer immédiatement :

: → pseudo-classe
:: → pseudo-élément

Le W3C distingue explicitement les deux concepts dans Selectors Level 4.

Les pseudo-classes ont longtemps été perçues comme un petit outil pratique permettant essentiellement de gérer :hover, :active ou :first-child.

Ce n'est plus vraiment le cas :

:is(),
:where(),
:not()
et surtout :has(),

Avec ces pseudos classes, CSS possède désormais une capacité d'expression beaucoup plus importante. À cela s'ajoutent les états des formulaires, le focus, les médias, les popovers, le plein écran, les Web Components et les nouvelles fonctionnalités de navigation et de transition.

Le résultat est intéressant pour un développeur comme pour un webdesigner : une partie de la logique d'interface peut désormais être exprimée directement dans CSS, sans multiplier les classes HTML et sans faire intervenir JavaScript pour des comportements purement visuels.

CSS n'est donc plus seulement un langage qui dit « cet élément est rouge », Il devient progressivement capable de dire : « cet élément est rouge lorsqu'il est dans cette situation», et c'est précisément là que les pseudo-classes deviennent puissantes.

Sources et références