Pseudo-classes
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
Expérimental:blank
Expérimental:checked
:current
Expérimental:default
:defined
:dir()
Expérimental:disabled
:drop
Expérimental:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
Expérimental:future
Expérimental:focus
:focus-visible
Expérimental:focus-within
:has()
Expérimental:host
:host()
:host-context()
Expérimental:hover
:indeterminate
:in-range
:invalid
:is
Expérimental:lang()
:last-child
:last-of-type
:left
:link
:local-link
Expérimental:not()
:nth-child()
:nth-col()
Expérimental:nth-last-child()
:nth-last-col()
Expérimental:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
Expérimental:placeholder-shown
Expérimental:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
Expérimental:user-invalid
Expérimental:valid
:visited
:where()
Expérimental
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
Specification |
---|
HTML Standard # pseudo-classes |
Selectors Level 4 |
CSS Basic User Interface Module Level 4 |