Pseudo-classes

Une pseudo-classe CSS est un mot-clé ajouté à un sélecteur qui vous permet de styliser un état spécifique des éléments sélectionnés. Par exemple, la pseudo-classe :hover peut être utilisée pour sélectionner un bouton lorsque le pointeur de l'utilisateur·ice survole le bouton, et ce bouton sélectionné peut ensuite être stylisé.

css

/* Tout bouton sur lequel le pointeur de l'utilisateur·ice est en survol */
button:hover {
  color: blue;
}

Une pseudo-classe consiste en un deux-points (:) suivi du nom de la pseudo-classe (par exemple, :hover). Une pseudo-classe fonctionnelle contient également une paire de parenthèses pour définir les arguments (par exemple, :dir()). L'élément auquel une pseudo-classe est attachée est défini comme un élément d'ancrage (par exemple, button dans le cas de button:hover).

Les pseudo-classes vous permettent d'appliquer un style à un élément non seulement par rapport au contenu de l'arbre de documents, mais aussi par rapport à des facteurs externes tels que l'historique du navigateur (:visited, par exemple), l'état de son contenu (comme :checked sur certains éléments de formulaire) ou la position de la souris (comme :hover, qui vous indique si la souris est au-dessus d'un élément ou non).

Note : Contrairement aux pseudo-classes, les pseudo-éléments peuvent être utilisés pour styliser une partie spécifique d'un élément.

Pseudo-classes élémentaires

Ces pseudo-classes se rapportent à l'identité fondamentale des éléments.

:defined: Correspond à tout élément qui est défini.
:heading: Correspond à tout élément de titre (<h1>-<h6>).

Pseudo-classes d'état d'affichage des éléments

Ces pseudo-classes permettent de sélectionner des éléments en fonction de leur état d'affichage.

:open: Correspond à un élément qui peut être ouvert ou fermé et qui est actuellement ouvert.
:popover-open: Correspond à un élément popover qui est actuellement dans l'état affiché.
:modal: Correspond à un élément qui est dans un état dans lequel il exclut toute interaction avec les éléments à l'extérieur jusqu'à ce que l'interaction ait été rejetée.
:fullscreen: Correspond à un élément qui est actuellement en mode plein écran.
:picture-in-picture: Correspond à un élément qui est actuellement en mode image dans l'image.

Pseudo-classes d'entrée de formulaire

Ces pseudo-classes se rapportent aux éléments de formulaire et permettent de sélectionner des éléments en fonction des attributs HTML et de l'état dans lequel se trouve le champ avant et après l'interaction.

:enabled: Correspond à un élément de l'interface utilisateur qui est dans un état activé.
:disabled: Correspond à un élément de l'interface utilisateur qui est dans un état désactivé.
:read-only: Correspond à tout élément qui ne peut pas être modifié par l'utilisateur.
:read-write: Correspond à tout élément qui est modifiable par l'utilisateur.
:placeholder-shown: Correspond à un élément de saisie qui affiche un texte d'espace réservé. Par exemple, cela correspond à l'attribut placeholder dans les éléments <input> et <textarea>.
:autofill: Correspond à un élément <input> qui a été rempli automatiquement par le navigateur.
:default: Correspond à un ou plusieurs éléments de l'interface utilisateur qui sont par défaut parmi un ensemble d'éléments.
:checked: Correspond lorsque des éléments tels que des cases à cocher et des boutons radio sont activés.
:indeterminate: Correspond à des éléments de l'interface utilisateur lorsqu'ils sont dans un état indéterminé.
:blank: Correspond à un élément de saisie utilisateur qui est vide, contenant une chaîne vide ou une autre entrée nulle.
:valid: Correspond à un élément avec un contenu valide. Par exemple, un élément de saisie avec le type 'email' qui contient une adresse email correctement formée ou une valeur vide si le contrôle n'est pas requis.
:invalid: Correspond à un élément avec un contenu invalide. Par exemple, un élément de saisie avec le type 'email' avec un nom saisi.
:in-range: Correspond à des éléments avec des limitations de plage. Par exemple, un contrôle de curseur lorsque la valeur sélectionnée est dans la plage autorisée.
:out-of-range: Correspond à des éléments avec des limitations de plage. Par exemple, un contrôle de curseur lorsque la valeur sélectionnée est en dehors de la plage autorisée.
:required: Correspond lorsque un élément de formulaire est requis.
:optional: Correspond lorsque un élément de formulaire est optionnel.
:user-valid: Correspond à un élément avec une saisie correcte, mais uniquement lorsque l'utilisateur·ice a interagi avec lui.
:user-invalid: Correspond à un élément avec une saisie incorrecte, mais uniquement lorsque l'utilisateur·ice a interagi avec lui.

Pseudo-classes linguistiques

Ces pseudo-classes reflètent la langue du document et permettent de sélectionner des éléments en fonction de la langue ou de la direction du script.

:dir(): La pseudo-classe de direction sélectionne un élément en fonction de sa direction telle que déterminée par la langue du document.
:lang(): Sélectionne un élément en fonction de sa langue de contenu.

Pseudo-classes de liens

Ces pseudo-classes se rapportent aux liens et aux éléments ciblés dans le document actuel.

:any-link: Correspond à un élément si l'élément correspond à :link ou :visited.
:link: Correspond à des liens qui n'ont pas encore été visités.
:visited: Correspond à des liens qui ont été visités.
:local-link: Correspond à des liens dont l'URL absolue est la même que l'URL cible. Par exemple, des liens d'ancrage vers la même page.
:target: Correspond à l'élément qui est la cible de l'URL du document.
:scope: Représente des éléments qui sont un point de référence pour les sélecteurs à comparer.

Note : Une pseudo-classe :target-within, pour correspondre aux éléments qui sont ou ont un descendant qui est la cible de l'URL du document, a été définie mais supprimée de la spécification. Utilisez :has(:target) à cette fin.

Pseudo-classes d'état des ressources

Ces pseudo-classes s'appliquent aux médias qui peuvent être dans un état où ils seraient décrits comme étant en lecture, comme une vidéo.

:playing: Représente un élément lisible qui est en lecture.
:paused: Représente un élément lisible qui est en pause.
:seeking: Représente un élément lisible qui recherche actuellement une position de lecture dans la ressource multimédia.
:buffering: Représente un élément lisible qui est en lecture mais qui est temporairement bloqué car il télécharge la ressource multimédia.
:stalled: Représente un élément lisible qui est en lecture mais qui est bloqué car il ne peut pas télécharger la ressource multimédia.
:muted: Représente un élément produisant du son qui est muet.
:volume-locked: Représente un élément produisant du son qui a son niveau de volume verrouillé par le navigateur.

Pseudo-classes dimensionnelles temporelles

Ces pseudo-classes s'appliquent lors de la visualisation de quelque chose qui a un timing, comme une piste de sous-titres WebVTT.

:current: Représente l'élément ou l'ancêtre de l'élément qui est affiché.
:past: Représente un élément qui se produit entièrement avant l'élément :current.
:future: Représente un élément qui se produit entièrement après l'élément :current.

Pseudo-classes structurelles d'arbre

Ces pseudo-classes se rapportent à l'emplacement d'un élément dans l'arbre du document.

:root: Représente un élément qui est la racine du document. Dans HTML, il s'agit généralement de l'élément <html>.
:empty: Représente un élément sans enfants autres que des caractères d'espace blanc.
:nth-child(): Utilise la notation An+B pour sélectionner des éléments d'une liste d'éléments frères.
:nth-last-child(): Utilise la notation An+B pour sélectionner des éléments d'une liste d'éléments frères, en comptant à rebours depuis la fin de la liste.
:first-child: Représente un élément qui est le premier de ses frères.
:last-child: Représente un élément qui est le dernier de ses frères.
:only-child: Représente un élément qui n'a pas de frères. Par exemple, un élément de liste sans d'autres éléments de liste dans cette liste.
:heading(): Utilise la notation An+B pour sélectionner des éléments d'en-tête (<h1>-<h6>).
:nth-of-type(): Utilise la notation An+B pour sélectionner des éléments d'une liste d'éléments frères qui correspondent à un certain type.
:nth-last-of-type(): Utilise la notation An+B pour sélectionner des éléments d'une liste d'éléments frères qui correspondent à un certain type, en comptant à rebours depuis la fin de la liste.
:first-of-type: Représente un élément qui est le premier de ses frères et qui correspond également à un certain sélecteur de type.
:last-of-type: Représente un élément qui est le dernier de ses frères et qui correspond également à un certain sélecteur de type.
:only-of-type: Représente un élément qui n'a pas de frères du type choisi.

Pseudo-classes structurelles fantômes

Ces pseudo-classes se rapportent au DOM fantôme.

:host: Représente l'hôte de l'arbre fantôme.
:host(): Représente un élément qui correspond à :host et à l'un des sélecteurs de la liste fournie.
:host-context(): Sélectionne des éléments en dehors de l'arbre fantôme dans le contexte de l'hôte fantôme.
:has-slotted: Représente les éléments de slot qui ont été assignés du contenu.

Pseudo-classes d'action utilisateur·ice

Ces pseudo-classes nécessitent une interaction de l'utilisateur·ice pour s'appliquer, comme le fait de maintenir un pointeur de souris au-dessus d'un élément.

:hover: Représente un élément lorsqu'un utilisateur·ice désigne un élément avec un dispositif de pointage, comme en maintenant le pointeur de la souris au-dessus de l'élément.
:active: Représente un élément lorsqu'il est activé par l'utilisateur·ice. Par exemple, lorsque l'élément est cliqué.
:focus: Représente un élément lorsqu'il a le focus.
:focus-visible: Représente un élément lorsqu'il a le focus et que l'agent utilisateur identifie que l'élément doit être visiblement en focus.
:focus-within: Représente un élément auquel :focus s'applique, plus tout élément qui a un descendant auquel :focus s'applique.
:target-current: Représente le pseudo-élément ::scroll-marker d'un scroll-marker-group qui est actuellement défilé, en d'autres termes, le marqueur de défilement actif.

Pseudo-classes fonctionnelles

Ces pseudo-classes acceptent une liste de sélecteurs ou une liste de sélecteurs indulgente comme paramètre.

:is(): La pseudo-classe matches-any correspond à tout élément qui correspond à l'un des sélecteurs de la liste fournie. La liste est tolérante.
:not(): La pseudo-classe de négation, ou matches-none, représente tout élément qui n'est pas représenté par son argument.
:where(): La pseudo-classe d'ajustement de spécificité correspond à tout élément qui correspond à l'un des sélecteurs de la liste fournie sans ajouter de poids de spécificité. La liste est tolérante.
:has(): La pseudo-classe relationnelle représente un élément si l'un des sélecteurs relatifs correspond lorsqu'il est ancré par rapport à l'élément attaché.

Pseudo-classes d'état personnalisé

Ces pseudo-classes s'appliquent aux éléments personnalisés.

:state(): Correspond à des éléments personnalisés qui ont l'état personnalisé spécifié.

Pseudo-classes de page

Ces pseudo-classes se rapportent aux pages d'un document imprimé et sont utilisées avec la règle @page.

:left: Représente toutes les pages de gauche d'un document imprimé.
:right: Représente toutes les pages de droite d'un document imprimé.
:first: Représente la première page d'un document imprimé.
:blank: Représente une page blanche dans un document imprimé.

Pseudo-classes de transition de vue

Ces pseudo-classes se rapportent aux éléments impliqués dans une transition de vue.

:active-view-transition: Correspond à l'élément racine d'un document lorsqu'une transition de vue est en cours (active) et cesse de correspondre une fois la transition terminée.
:active-view-transition-type(): Correspond à l'élément racine d'un document lorsqu'une transition de vue spécifiée est en cours (active) et cesse de correspondre une fois la transition terminée.

Syntaxe

css

sélecteur:pseudo-classe {
  propriété: valeur;
}

Comme pour les classes régulières, vous pouvez chaîner autant de pseudo-classes que vous le souhaitez dans un sélecteur.

Index alphabétique

Les pseudo-classes définies par un ensemble de spécifications CSS incluent les suivantes :

:blank (input) Expérimental
:blank (page)
:buffering

:checked
:current Expérimental

:where()

Spécifications

Specification
HTML # pseudo-classes
Selectors Level 4
CSS Scoping Module Level 1
CSS Paged Media Module Level 3

Voir aussi

Les Pseudo-éléments

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨13 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content