Spécificité CSS

La spécificité détermine quelle règle CSS l'emporte quand plusieurs règles ciblent le même élément. Elle s'exprime sous la forme (a, b, c) et se compare composante par composante, de gauche à droite.

Composantes de la spécificité

Composante	Valeur	Exemples
a, ID	0-1-0-0	`#header`, `#nav`
b, Classe/attribut/pseudo-classe	0-0-1-0	`.btn`, `[type="text"]`, `:hover`
c, Type/pseudo-élément	0-0-0-1	`div`, `p`, `::before`
Universel / combinateurs	0-0-0-0	`*`, `>`, `+`, `~`

Règles de comparaison

On compare de gauche à droite. Un seul ID (0,1,0,0) bat n'importe quel nombre de classes. Exemple : #nav .link = (0,1,1,0) bat .menu .item a = (0,0,2,1).

Cas particuliers

!important surpasse toute spécificité (à éviter sauf dernier recours)
:is() et :has() héritent de la spécificité de leur argument le plus spécifique
:where() a toujours une spécificité nulle, utile pour les resets
Les styles inline ont une spécificité de (1,0,0,0)