Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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é.

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.

Correspond à un élément si l'élément correspond à :link ou :visited.

Correspond à des liens qui n'ont pas encore été visités.

:visited

Correspond à des liens qui ont été visités.

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é.

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 :

A

B

C

D

E

F

H

I

L

M

N

O

P

R

S

T

U

V

W

Spécifications

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

Voir aussi