Une pseudo-classe est un mot-clé qui peut être ajouté aux sélecteurs afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe :hover
, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur.
Les pseudo-classes et les pseudo-éléments permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec :visited
; le statut du contenu avec :checked
; la position de la souris :hover
).
Syntaxe
sélector:pseudo-classe { propriété: valeur; }
Liste des pseudo-classes standards
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
Exemples
CSS
.survol:hover { background-color: palegreen; } p:nth-child(2n+1) { background-color: lime; }
HTML
<div> <p class="survol"> La Reine devint pourpre de colère ; et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une bête fauve, elle se mit à crier : « Qu’on lui coupe la tête ! » </p> <p> « Quelle idée ! » dit Alice très-haut et d’un ton décidé. La Reine se tut. </p> <p> Le Roi lui posa la main sur le bras, et lui dit timidement : « Considérez donc, ma chère amie, que ce n’est qu’une enfant. » </p> </div>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Fullscreen API | Standard évolutif | Définition de :fullscreen . |
WHATWG HTML Living Standard | Standard évolutif | Aucune modification par rapport à HTML5. |
Selectors Level 4 | Version de travail | Définition de :any-link , :local-link , :scope , :active-drop-target , :valid-drop-target , :invalid-drop-target , :current , :past , :future , :placeholder-shown , :user-error , :blank , :nth-match() , :nth-last-match() , :nth-column() , :nth-last-column() et :matches() .Aucune modification significative pour les pseudo-classes définies avec Selectors Level 3 et HTML5. |
HTML5 | Recommendation | Définition de la sémantique dans le contexte HTML pour :link , :visited , :active , :enabled , :disabled , :checked et :indeterminate .Définition des pseudo-classes :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only , :read-write , and :dir() . |
CSS Basic User Interface Module Level 3 | Candidat au statut de recommandation | Définition de :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only et :read-write , mais sans la sémantique associée. |
Selectors Level 3 | Recommendation | Définition de :target , :root , :nth-child() , :nth-last-of-child() , :nth-of-type() , :nth-last-of-type() , :last-child , :first-of-type , :last-of-type , :only-child , :only-of-type , :empty et :not() .Définition de la syntaxe pour :enabled , :disabled , :checked et :indeterminate , mais sans la sémantique associée.Pas de modification significative pour les pseudo-classes définies avec CSS Level 2 (Revision 1). |
CSS Level 2 (Revision 1) | Recommendation | Définition de :lang() , :first-child , :hover et :focus .Aucune modification significative pour les pseudo-classes définies avec CSS Level 1. |
CSS Level 1 | Recommendation | Définition de :link , :visited et :active , mais sans la sémantique associée. |