Calculateur de spécificité CSS

Qu’est-ce que la spécificité CSS ?#

Quand deux règles CSS tentent toutes deux de définir la même propriété sur le même élément, le navigateur ne choisit pas celle écrite en dernier — il choisit celle dont la spécificité est la plus élevée. La spécificité est un score en trois parties (A, B, C) que la cascade compare comme un numéro de version :

• A — sélecteurs d’ID (#header).
• B — sélecteurs de classe (.btn), sélecteurs d’attribut ([type=email]) et pseudo-classes (:hover, :focus).
• C — sélecteurs de type (div, a) et pseudo-éléments (::before, ::first-line).

A est comparé en premier ; une égalité bascule vers B, puis C. Un ID (1,0,0) bat n’importe quel nombre de classes (0,99,99), qui à leur tour battent n’importe quel nombre de types. Le sélecteur universel *, les combinateurs (> + ~) et le sélecteur d’imbrication & n’ajoutent rien.

Cette page calcule ce triplet pour n’importe quel sélecteur que vous collez — y compris les pseudo-classes fonctionnelles modernes :is(), :where(), :not(), :has() et la clause of S de :nth-child() — classe une liste de sélecteurs et montre exactement quelles pièces ont contribué quoi. C’est le moyen le plus rapide de répondre à la question CSS universelle : « pourquoi ma règle perd-elle ? »

Comment l’utiliser#

1. Cliquez sur Exemple pour charger un jeu de sélecteurs travaillés, ou effacez la zone et collez les vôtres. Vous pouvez saisir un sélecteur nu (#nav .item) ou une règle complète (#nav .item { color: red }) ; l’outil lit la partie avant {.
2. Plusieurs sélecteurs ? Séparez-les par des virgules — ils sont classés du plus au moins spécifique, et le gagnant est signalé.
3. Le volet droit liste chaque sélecteur avec son triplet (A, B, C) et une décomposition colorée de chaque pièce contributive (rouge = ID, bleu = classe/attribut/pseudo-classe, vert = type/pseudo-élément), pour que vous voyiez pourquoi le score est ce qu’il est.
4. La légende colorée en haut à droite vous rappelle quel point correspond à A / B / C.
5. Si votre règle contenait !important, une note d’information apparaît — !important est une redéfinition au niveau de la déclaration qui se situe au-dessus de la comparaison de spécificité, pas à l’intérieur.

Caractéristiques principales#

• Correct sur les cas difficiles. :where() contribue toujours (0,0,0) ; :is() / :not() / :has() prennent la spécificité la plus élevée parmi leurs arguments ; l’ancien :before et la clause of S de :nth-child() sont gérés selon Selectors Level 4.
• Classe une liste séparée par des virgules et signale les égalités, pour que vous voyiez d’un coup d’œil laquelle de plusieurs règles gagnera.
• Décomposition par pièce. Chaque #id, .class, [attr], :pseudo-classe, ::pseudo-élément et type est détaillé avec le texte exact qu’il a contribué.
• Tolérant aux règles complètes. Collez a:hover { text-decoration: underline } — les commentaires sont retirés et le bloc de déclarations est ignoré automatiquement.
• 100 % local. Rien ne quitte la page ; aucune feuille de style n’est récupérée ni évaluée.

Exemple commenté#

Une énigme de débogage courante : trois règles ciblent toutes le même lien, et la mauvaise couleur gagne. Collez-les dans la zone :

.button:hover
:is(.card, #hero) .button
a.button

La sortie les classe :

Le gagnant n’est pas celui qui a le plus de classes. :is(.card, #hero) hérite de la spécificité la plus élevée de ses arguments — #hero est un ID, donc :is() porte (1,0,0) même si .card ne ferait que (0,1,0). Ajouter .button incrémente B d’un, donnant (1,1,0). Ce seul ID en colonne A bat les deux classes de .button:hover (0,2,0) — c’est la surprise exacte qui rend :is() dangereux en CSS de production.

Si vous aviez besoin du même regroupement sans élever la spécificité, vous remplaceriez :is() par :where() :

:where(.card, #hero) .button   →   (0, 1, 0)

Désormais il est à égalité avec a.button sans le type, et l’ordre source décide. C’est toute la raison d’être de :where().

FAQ#

Pourquoi un ID bat-il des centaines de classes ?#

La spécificité compare les colonnes de gauche à droite comme un numéro de version, non comme un total sommé. (1,0,0) est « en avance » sur (0,999,999) parce que la colonne A est non nulle dans le premier et nulle dans le second ; les colonnes B et C ne sont même jamais consultées. C’est délibéré — les ID étaient censés être des singletons non ambigus.

Quelle est la différence entre :is() et :where() ?#

Ils sont identiques dans ce qu’ils correspondent, mais opposés en spécificité. :is(.a, #b) prend la spécificité la plus élevée parmi ses arguments (donc #b le met à (1,0,0)) ; :where(.a, #b) contribue toujours (0,0,0) quels que soient ses arguments. Utilisez :where() pour des valeurs par défaut à faible spécificité faciles à surcharger, et :is() quand vous voulez réellement que le sélecteur combiné concoure.

Un attribut inline style="…" bat-il tout cela ?#

Oui. Les styles en ligne surpassent toute règle basée sur sélecteur dans la cascade normale (ils se situent à une origine supérieure), donc aucun triplet de sélecteur ne surchargera un style en ligne sans !important. C’est un axe séparé du score (A,B,C), c’est pourquoi l’outil n’évalue que les sélecteurs.

Où se situe !important ?#

!important est un marqueur au niveau de la déclaration, pas une propriété de sélecteur — il ne change pas le triplet (A,B,C). Il déplace toute la déclaration vers une origine de cascade supérieure, donc une règle !important bat une règle normale quelle que soit la spécificité. L’outil signale sa présence à titre informatif mais le laisse hors du score.