Deux règles CSS ciblent le même bouton, l’une le veut bleu, l’autre rouge : comment le navigateur choisit-il ? Il compare la spécificité des sélecteurs, souvent résumée en trois chiffres (identifiants, classes/attributs/pseudo-classes, balises). Un identifiant pèse plus qu’une classe, qui pèse plus qu’une simple balise ; à spécificité égale, c’est alors la dernière règle déclarée dans le CSS qui gagne.
Dans WordPress
Les styles générés par theme.json sont volontairement écrits avec une spécificité faible et cohérente, pour rester faciles à surcharger depuis la feuille de style d’un thème enfant ou d’une extension. C’est une source fréquente de confusion : un style personnalisé qui ne s’applique pas sur un bloc n’est pas forcément « ignoré », il est simplement emporté par un sélecteur plus spécifique généré ailleurs, par exemple par un identifiant #block-xxxx ajouté automatiquement.
Exemple
/* spécificité (0,1,0) : une classe */
.wp-block-button__link { color: blue; }
/* spécificité (1,0,0) : un identifiant, l'emporte toujours */
#bouton-principal { color: red; }Bon à savoir
- Le mot-clé
!importantne fait pas partie du calcul de spécificité à proprement parler : il court-circuite la cascade et devrait rester une solution de dernier recours. - Un sélecteur répété (
.classe.classe) augmente artificiellement la spécificité sans changer la portée du sélecteur, une astuce parfois utilisée pour éviter!important. - Les calques de cascade (
@layer) permettent désormais de trancher les conflits par ordre de calque avant même de comparer la spécificité, ce qui change la donne pour l’organisation du CSS d’un thème de blocs.