Avant même de parler de couleur ou de marge, une règle CSS commence toujours par répondre à une question : à qui ça s’adresse ? C’est le rôle du sélecteur, placé avant les accolades. Il peut viser une balise (p), une classe (.entete), un identifiant (#zone-contact), un attribut ([type="email"]), ou combiner plusieurs de ces critères avec des combinateurs (espace pour un descendant, > pour un enfant direct, + pour un frère adjacent).
Fonctionnement dans WordPress
Chaque bloc de l’éditeur génère une classe prévisible, généralement wp-block-nom-du-bloc (par exemple wp-block-paragraph ou wp-block-image), qui sert de point d’accroche pour le style du thème ou d’un CSS personnalisé. Un identifiant HTML ajouté dans les réglages avancés d’un bloc devient lui aussi un sélecteur possible, utile pour cibler ce bloc précis plutôt que tous les blocs du même type.
Exemple
/* tous les paragraphes à l'intérieur du bloc Groupe */
.wp-block-group p {
line-height: 1.6;
}
/* seulement le bouton portant l'identifiant "cta-principal" */
#cta-principal {
font-weight: bold;
}Pièges fréquents
- Un sélecteur trop générique (une simple balise
aoup) risque de déborder sur des zones du site qu’on ne voulait pas toucher, notamment dans l’éditeur de blocs partagé par tout le site. - Deux sélecteurs peuvent viser le même élément avec des priorités différentes : c’est la spécificité, et non l’ordre d’écriture seul, qui tranche en cas de conflit.
- Les sélecteurs générés automatiquement par un bloc peuvent changer d’une version de WordPress à l’autre : mieux vaut ajouter sa propre classe plutôt que de s’appuyer uniquement sur les classes internes.