# Spécificité

> La spécificité est la règle de calcul qui détermine, quand plusieurs sélecteurs CSS visent le même élément, lequel l'emporte, indépendamment de l'ordre d'écriture dans le fichier.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/specificite/

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é `!important` ne 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.