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.
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).
À 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élector: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: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. |