Mode d'emploi
- Saisissez un sélecteur dans Sélecteur, écrit comme il l'est dans votre feuille de style.
- Saisissez un second sélecteur dans Second sélecteur (facultatif) pour les comparer, ou laissez le champ vide.
- Lisez Spécificité (a, b, c) pour le premier sélecteur, et Quelle règle l'emporte lorsque vous en avez donné deux.
- Consultez le tableau Éléments comptés pour voir quelle partie de chaque sélecteur donne chaque nombre.
Comment les trois nombres sont comptés
La recommandation Selectors Level 3 du W3C compte un sélecteur en trois colonnes. L'outil compare les nombres de gauche à droite : a d'abord, puis b, puis c. Le sélecteur universel * et les combinateurs comme > et + ne sont pas comptés.
- a est le nombre de sélecteurs d'identifiant, comme #nav.
- b est le nombre de sélecteurs de classe, comme .active, de sélecteurs d'attribut, comme [href], et de pseudo-classes, comme :hover.
- c est le nombre de sélecteurs de type, comme li ou a, et de pseudo-éléments, comme ::before.
Pseudo-classes avec arguments
:is(), :not() et :has() comptent pour leur argument le plus spécifique, donc :is(#a, .b) vaut (1, 0, 0). :where() ne compte pour rien. :nth-child() compte comme une pseudo-classe, plus le sélecteur le plus spécifique de sa liste « of S », donc :nth-child(even of li, .item) vaut (0, 2, 0). Ces règles viennent du brouillon Selectors Level 4 (en anglais), qui est un projet de travail (Editor's Draft) et peut changer.
Ce que l'outil ne fait pas
- Il compte un pseudo-élément avec des arguments, comme ::part(x), comme un seul pseudo-élément, et il ne lit pas son argument.
- Il ne lit pas l'imbrication avec &, et il prend un sélecteur à la fois, non une liste séparée par des virgules.
- Il ne voit pas votre feuille de style : lorsque deux sélecteurs sont à égalité, il indique que la règle la plus tardive l'emporte, et laisse l'ordre à votre charge.
Exemple détaillé : un lien dans une barre de navigation
Le premier sélecteur, #nav li.active > a:hover, a un identifiant, #nav. Il a deux classes et pseudo-classes, .active et :hover, et deux types, li et a. Sa spécificité est (1, 2, 2). Le second sélecteur, #nav a, a un identifiant et un type, donc sa spécificité est (1, 0, 1). Le premier sélecteur l'emporte : les deux ont a égal à 1, et b et c sont plus élevés pour lui.
| Sélecteur | a | b | c |
|---|---|---|---|
| #nav li.active > a:hover | 1 | 2 | 2 |
| #nav a | 1 | 0 | 1 |
Questions fréquentes
Pourquoi un identifiant compte-t-il dans la première colonne ?
L'outil compare les colonnes de gauche à droite, donc la colonne des identifiants a est décidée en premier. Un sélecteur qui a un identifiant de plus a un a plus élevé, et les classes et les types de b et c ne sont alors pas examinés.
L'ordre des règles compte-t-il ?
Seulement lorsque deux sélecteurs ont la même spécificité. La spécification CSS Cascade Level 4 (en anglais) indique que la dernière déclaration dans l'ordre du document l'emporte dans ce cas, donc la règle la plus tardive prend effet.
Pourquoi :not(#a) ajoute-t-il à la spécificité ?
La pseudo-classe :not() elle-même n'est pas comptée, mais son argument l'est. L'exemple de Selectors Level 3, #s12:not(FOO), vaut (1, 0, 1) : un identifiant venu de #s12, et un type venu de l'argument FOO.
Le sélecteur universel et les combinateurs ajoutent-ils quelque chose ?
Non. Le sélecteur universel est ignoré, et les combinateurs comme >, + et ~ aussi. L'exemple * de la section Level 3 a la spécificité (0, 0, 0).
L'outil tient-il compte des styles en ligne et de !important ?
Non. Il compte un seul sélecteur. La cascade compare d'abord l'origine et l'importance, avant la spécificité : une règle marquée !important ou un style en ligne peut l'emporter quel que soit le score des sélecteurs. Ne comparez que deux sélecteurs qui fixent la même propriété avec la même importance.
Le sélecteur que je saisis est-il envoyé quelque part ?
Non. L'analyse se fait dans votre navigateur, et rien de ce que vous saisissez n'est stocké ni envoyé à notre serveur. Vérifiez le résultat avant de modifier une feuille de style.
Sources
- W3C (en anglais) : Selectors Level 3, Calculating a selector's specificity
- W3C (en anglais) : Selectors Level 4 (Editor's Draft), specificity rules
- W3C (en anglais) : CSS Cascade Level 4, cascade sorting order
Chiffres et texte vérifiés pour la dernière fois le jeudi 12 novembre 2026.