Calculateur de spécificité des sélecteurs CSS

Ce calculateur accepte un sélecteur, valide sa structure et renvoie le décompte habituel en quatre parties : styles en ligne, ID, classes ou attributs ou pseudo-classes, puis types d’éléments ou pseudo-éléments. Il applique également les règles particulières des sélecteurs modernes tels que :is(), :not(), :has(), :where() et :nth-child(). Vous pouvez vous en servir pour expliquer une surcharge inattendue, comparer des sélecteurs lors d’une refactorisation ou intégrer un contrôle fiable à vos outils de développement.

Lire le résultat de spécificité en quatre parties

Le résultat est présenté sous la forme (en ligne, ID, classe, type). La première position représente les déclarations de style en ligne ; puisque cet outil reçoit un sélecteur et non un attribut style HTML, cette valeur reste toujours égale à zéro. La deuxième position compte les sélecteurs d’ID comme <code>#checkout</code>. La troisième regroupe les sélecteurs de classe, les sélecteurs d’attribut et les pseudo-classes : <code>.button</code>, <code>[disabled]</code> et <code>:hover</code> ajoutent donc chacun une unité. La quatrième compte les sélecteurs de type d’élément et les pseudo-éléments ; <code>button</code> et <code>::before</code> ajoutent chacun une unité. Les sélecteurs universels et les combinateurs n’ajoutent rien. Comparez le tuple de gauche à droite au lieu d’en faire une somme décimale : un ID dépasse n’importe quel nombre de classes, et une classe dépasse n’importe quel nombre de types. Les champs nommés facilitent l’exploitation dans du code, tandis que le tableau de spécificité conserve la représentation conventionnelle. La spécificité ne constitue toutefois qu’une partie de la cascade. L’origine, l’importance, les couches, la proximité de portée et l’ordre des sources peuvent encore désigner la déclaration gagnante sur une page réelle.

Comprendre les règles des pseudo-classes fonctionnelles

Les pseudo-classes fonctionnelles modernes ne se résument pas à compter chaque jeton. <code>:is()</code>, <code>:not()</code> et <code>:has()</code> apportent la spécificité du sélecteur le plus spécifique de leur liste d’arguments ; l’enveloppe elle-même n’ajoute aucun poids de classe. À l’inverse, <code>:where()</code> apporte toujours zéro, même si son argument contient un ID. Cette propriété rend <code>:where()</code> pratique pour les valeurs par défaut de bibliothèques qui doivent rester simples à surcharger. Les pseudo-classes structurelles <code>:nth-child()</code> et <code>:nth-last-child()</code> ajoutent une unité de pseudo-classe et, lorsqu’une liste facultative suit <code>of</code>, elles ajoutent aussi son membre le plus spécifique. Les autres pseudo-classes fonctionnelles comptent au niveau classe, tandis que les pseudo-éléments comptent au niveau type. L’analyseur reconnaît également les sélecteurs relatifs dans <code>:has()</code>, les caractères d’identifiant échappés, les valeurs d’attribut ponctuées, les espaces de noms et les anciennes formes à un seul deux-points <code>:before</code>, <code>:after</code>, <code>:first-line</code> et <code>:first-letter</code>. Ces distinctions correspondent au raisonnement des auteurs sur le CSS actuel, sans réduire les parenthèses à du texte opaque.

Détecter les erreurs grâce à la validation

Un indice de spécificité n’est utile que si l’entrée ressemble réellement à un sélecteur. Le calculateur refuse donc les champs manquants, le texte vide, les chaînes inachevées, les crochets ou parenthèses non fermés, les combinateurs mal formés, les identifiants absents après un point ou un croisillon et d’autres erreurs structurelles. Il accepte un seul sélecteur à la fois. Une virgule au niveau supérieur crée une liste dont les membres peuvent avoir des spécificités différentes ; cette entrée est donc rejetée avec une demande de sélecteur unique. Calculez chaque membre séparément lorsque vous comparez une liste de règles. La longueur d’entrée est bornée afin de garantir une exécution prévisible, et l’algorithme n’utilise ni session de navigateur, ni réseau, ni valeur aléatoire, ni horloge. Une entrée identique produit ainsi le même JSON dans le widget local, un appel API, une suite de tests ou un contrôle de build. Utilisez ce résultat comme diagnostic ciblé, puis examinez les couches de cascade, <code>!important</code>, l’héritage et l’ordre des sources si la spécificité n’explique pas à elle seule le style affiché.