Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur 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 (changer la couleur d'un bouton par exemple).
div:hover {
background-color: #F89B4D;
}
Les pseudo-classes 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
).
Note: À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.
Syntaxe
sélecteur:pseudo-classe { propriété: valeur; }
À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.
Liste des pseudo-classes standards
:active
:any-link
:blank
:checked
:current
:default
:defined
:dir()
:disabled
:drop
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:future
:focus
:focus-visible
:focus-within
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:not()
:nth-child()
:nth-col()
:nth-last-child()
:nth-last-col()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
:user-invalid
:valid
:visited
:where()
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 . |
HTML Living Standard | Standard évolutif | Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML. |
Selectors Level 4 | Version de travail |
Définition de Changement afin que Aucune modification significative pour les pseudo-classes définies avec Selectors Level 3 et HTML5. |
HTML5 | Recommendation | Copie les éléments pertinents de la spécification HTML WHATWG |
CSS Basic User Interface Module Level 3 | Recommendation | 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. |