Manuel de pseudo-classes CSS

Pseudo-classe CSS

Les pseudo-classes sont utilisées pour définir les états spéciaux des éléments.

Par exemple, cela peut être utilisé pour :

  • Définir les styles lorsque l'utilisateur fait glisser la souris sur l'élément.
  • Définir des styles différents pour les liens visités et non visités.
  • Définir les styles lorsque l'élément obtient le focus.
  • Définir les styles pour les éléments de formulaire valides/invalides/obligatoires/optionnels.

Le tableau suivant montre les pseudo-classes différentes dans CSS :

Pseudo-classe Exemple Description de l'exemple
:active a:active Sélectionner les liens actifs.
:any-link a:anylink Sélectionner tous les éléments <a> ou <area> avec l'attribut href.
:auto-fill input:autofill Sélectionner tous les éléments <input> remplis automatiquement par le navigateur.
:checked option:checked Correspondre à tous les éléments <input> ou <option> sélectionnés.
:default input:default Sélectionner l'élément de formulaire par défaut dans un ensemble d'éléments associés.
:defined :defined Sélectionner tous les éléments définis (éléments standards ou personnalisés).
:dir() :dir(rtl) Sélectionner les éléments avec une direction de texte spécifiée.
:disabled option:disabled Sélectionner tous les éléments désactivés, souvent utilisés pour les éléments de formulaire.
:empty div:empty Sélectionner tous les éléments sans éléments enfants (y compris les nœuds texte).
:enabled input:enabled Sélectionnez tous les éléments activés, souvent utilisé pour les éléments de formulaire.
:first @page :first Réprésente la première page du document à imprimer (à utiliser avec la règle @page).
:first-child p:first-child Sélectionnez l'élément qui est le premier enfant de son élément parent (dans un ensemble de frères).
:first-of-type li:first-of-type Sélectionnez le premier élément d'un ensemble de frères spécifique par type.
:focus select:focus Sélectionnez l'élément qui a le focus, souvent utilisé pour les éléments de formulaire.
:focus-visible button:focus-visible Sélectionnez l'élément qui a le focus (seulement lorsque le focus est appliqué via le clavier et non la souris).
:focus-within form:focus-within Correspond à l'élément ou à tout descendant de l'élément qui a obtenu le focus.
:fullscreen :fullscreen Sélectionnez l'élément qui est en mode plein écran.
:has() h2:has(+p) Sélectionnez l'élément <h2> immédiatement après l'élément <p>, et appliquez le style à <h2>.
:hover a:hover Sélectionnez l'élément auquel le curseur de la souris est pointé.
:in-range input:in-range Sélectionnez les éléments <input> avec une valeur dans l'intervalle spécifié.
:indeterminate input:indeterminate Sélectionnez les éléments de formulaire incertains.
:invalid input:invalid Sélectionnez les éléments de formulaire invalides.
:is() :is(ul, ol) Sélectionnez tous les éléments <ul> et <ol>.
:lang() p:lang(it) Sélectionnez les éléments <p> avec l'attribut lang "it" (italien).
:last-child li:last-child Sélectionnez l'élément <li> qui est le dernier enfant de son élément parent.
:last-of-type p:last-of-type Sélectionnez l'élément <p> qui est le dernier élément <p> de son élément parent.
:left @page :left Réprésente toutes les pages gauches du document à imprimer (à utiliser avec la règle @page).
:link a:link Sélectionnez tous les liens non visités.
:modal :modal Sélectionnez les éléments dans un état modal.
:not() :not(p) Sélectionnez tous les éléments qui ne sont pas des éléments <p>.
:nth-child() p:nth-child(2) Choisissez l'élément <p> qui est le deuxième enfant de son élément parent.
:nth-last-child() p:nth-last-child(2) Sélectionner l'élément <p> qui est le deuxième enfant dernier de son élément parent.
:nth-last-of-type() p:nth-last-of-type(2) Sélectionner l'élément <p> qui est le deuxième enfant dernier de son élément parent.
:nth-of-type() p:nth-of-type(2) Sélectionner l'élément <p> qui est le deuxième élément <p> de son élément parent.
:only-child p:only-child Sélectionner l'élément <p> qui est l'unique enfant de son élément parent.
:only-of-type p:only-of-type Sélectionner l'élément <p> qui est l'unique élément <p> de son élément parent.
:optional textarea:optional Sélectionner les éléments <input>, <select> ou <textarea> sans l'attribut required.
:out-of-range input:out-of-range Sélectionner les éléments <input> whose value is out of the specified range.
:placeholder-shown input:placeholder-shown Sélectionner les éléments <input> ou <textarea> affichant actuellement le texte de placeholder.
:popover-open :popover-open Sélectionner les éléments en état d'affichage popup.
:read-only input:read-only Sélectionner les éléments d'entrée avec l'attribut readonly.
:read-write input:read-write Sélectionner les éléments d'entrée éditable.
:required input:required Sélectionner les éléments d'entrée avec l'attribut required.
:right @page :right Représente toutes les pages右边面的文档（avec la règle @page).
:root :root Sélectionner l'élément racine du document.
:scope :scope Sélectionner les éléments qui servent de point de référence ou de plage pour le sélecteur.
:state() :state() Sélectionner les éléments personnalisés ayant un état personnalisé spécifié.
:target :target Sélectionner l'élément cible actif.
:user-invalid :user-invalid Sélectionner les éléments de formulaire ayant une valeur invalide (après que l'utilisateur ait interagi avec eux).
:user-valid :user-valid Sélectionner les éléments de formulaire ayant une valeur valable (après que l'utilisateur ait interagi avec eux).
:valid input:valid Sélectionner tous les éléments d'entrée ayant une valeur valable.
:visited a:visited Sélectionnez tous les liens visités.
:where() :where(ol, ul) Sélectionnez tous les éléments <ul> et <ol>.