Comment calculer la spécificité CSS d’un sélecteur

À quoi sert le calculateur de spécificité CSS ?

Cet outil aide à examiner la spécificité d’un sélecteur CSS sans effectuer le calcul à la main. Il accepte un texte de sélecteur facultatif : vous pouvez saisir une expression comme #menu, .carte ou un sélecteur composé, puis consulter ses composantes et son score numérique.

Le résultat sert à comparer le poids relatif de sélecteurs dans une feuille de style. Il faut toutefois le lire comme le résultat des règles de détection appliquées par l’outil, et non comme l’analyse exhaustive de toutes les constructions possibles du langage CSS.

Procédure

Ouvrez l’outil et repérez le champ destiné au texte du sélecteur. La saisie est facultative et sa valeur par défaut est vide.
Saisissez le sélecteur CSS à examiner, en conservant sa forme telle que vous souhaitez l’analyser. Par exemple, vous pouvez entrer #menu, .carte, [type="email"] ou un sélecteur composé.
Lancez le calcul avec le contrôle prévu à cet effet. Pour une saisie non vide, le résultat renvoie une représentation du sélecteur soumis et les composantes de spécificité calculées.
Relevez les composantes et le score numérique. Les identifiants contribuent à la première composante ; les classes, les sélecteurs d’attributs et les pseudo-classes contribuent à la deuxième ; les pseudo-éléments ainsi que les sélecteurs de type détectés contribuent à la troisième. Le sélecteur universel n’est pas compté.
Comparez le score obtenu avec celui d’un autre sélecteur si vous cherchez à comprendre lequel pèse davantage dans votre feuille de style.

Comprendre le résultat

Les composantes sont présentées sous la forme de quatre valeurs. La première correspond aux identifiants détectés, la deuxième aux classes, attributs et pseudo-classes, et la troisième aux pseudo-éléments et aux sélecteurs de type détectés. La quatrième composante peut donc rester à zéro dans les cas décrits par ces règles.

Le score applique des poids de 1000, 100, 10 et 1 aux quatre composantes, dans cet ordre. Un identifiant isolé produit ainsi la forme [1, 0, 0, 0], tandis qu’un sélecteur universel seul ne reçoit pas de contribution au titre de cet élément.

Si le champ contient seulement des espaces, l’outil renvoie quatre composantes à zéro, un score nul et une représentation vide du sélecteur. Ce résultat indique qu’aucun texte exploitable n’a été fourni ; il ne permet pas d’évaluer un sélecteur CSS.

Pour interpréter une comparaison, vérifiez donc d’abord la saisie, puis les composantes avant de regarder le score. La représentation renvoyée conserve le texte soumis lorsqu’il n’est pas vide, ce qui facilite la vérification de la valeur analysée.

Exemple pratique

Vous vérifiez le poids du sélecteur #menu avant de comparer cette règle avec un sélecteur de classe dans une feuille de style.

Saisissez #menu dans le champ, lancez le calcul, puis vérifiez la représentation renvoyée, les quatre composantes et le score.

Le résultat contient une représentation du sélecteur, quatre composantes de spécificité et un score numérique. Pour #menu, la forme attendue est [1, 0, 0, 0] avec un score de 1000.

Limites

Le résultat reflète les règles de détection appliquées par l’outil pour les identifiants, classes, attributs, pseudo-classes, pseudo-éléments, sélecteurs de type et sélecteur universel. Ne le présentez pas comme une analyse exhaustive de toutes les formes de sélecteurs CSS.

Erreurs fréquentes

Erreur fréquente : lancer le calcul avec un champ vide ou composé uniquement d’espaces, puis interpréter le score nul comme une faible spécificité. Saisissez le sélecteur à examiner avant de relancer le calcul.

Questions fréquentes

Que se passe-t-il si je ne saisis aucun sélecteur CSS ?

Oui, le champ accepte un texte facultatif. Si vous le laissez vide ou ne saisissez que des espaces, le résultat comporte quatre zéros, un score nul et une représentation vide du sélecteur.

Comment le score de spécificité CSS est-il calculé ?

Le score utilise les poids 1000, 100, 10 et 1 pour les quatre composantes. Les identifiants influencent donc la première position, tandis que les classes, attributs et pseudo-classes influencent la deuxième.

Le sélecteur universel augmente-t-il le score ?

Non, le sélecteur universel n’est pas compté par l’outil. Les sélecteurs de type détectés et les pseudo-éléments contribuent, eux, à la troisième composante.