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.

.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 `: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()`. Changement afin que `:empty` se comporte comme `:-moz-only-whitespace` . 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.

Voir aussi

Les pseudo-éléments