Certains styles ne dépendent pas de ce qu’un élément est, mais de ce qu’il fait ou de où il se trouve dans la page. C’est le rôle des pseudo-classes, notées avec deux-points simples (:hover, :focus, :nth-child(), :checked) : elles s’ajoutent à un sélecteur pour ne toucher l’élément que dans certaines conditions, sans qu’il faille poser une classe ou un attribut supplémentaire dans le HTML.
Fonctionnement dans WordPress
L’éditeur de blocs génère lui-même des styles avec pseudo-classes : les boutons du bloc Bouton reçoivent un :hover et un :focus-visible pour l’accessibilité clavier, et les liens de navigation utilisent :focus pour rester repérables au clavier. Dans theme.json, certains blocs exposent des réglages d’état (couleur au survol par exemple) qui se traduisent, une fois générés, en règles CSS avec pseudo-classe ciblant la classe du bloc.
Exemple
.wp-block-button__link:hover {
background-color: #1e3a8a;
}
.wp-block-post-title:first-of-type {
margin-top: 0;
}Bon à savoir
- La pseudo-classe
:focus-visiblen’affiche l’indicateur de focus qu’à la navigation clavier, pas au clic à la souris : elle est préférable à:focusseul pour un site accessible. - Contrairement à un pseudo-élément (un seul deux-points, comme
::before), une pseudo-classe ne crée aucun contenu supplémentaire dans la page, elle ne fait que sélectionner un état. - L’ordre des pseudo-classes de lien compte historiquement : LVHA (
:link,:visited,:hover,:active) pour que chacune ait bien la priorité voulue.