Un sélecteur par ligne pour comparer la spécificité ; les listes à virgules sont découpées par sélecteur. Les invalides sont signalés, les couches ou !important décident toujours.
Fonctionne localement dans votre navigateurChaque sélecteur est noté avec les trois compteurs de la spécification : A pour les sélecteurs d’ID, B pour les classes, les attributs et les pseudo-classes, C pour les sélecteurs de type et les pseudo-éléments. Les trois exemples montrent la forme du résultat : #app .card:hover > h2 vaut 1-2-1, :where(.theme) .card:is(.featured, #hero) vaut 1-1-0 et main article[data-kind="docs"]::before vaut 0-1-3.
Les sélecteurs sont validés par l’analyseur du navigateur et notés dans l’onglet : rien n’est envoyé. La ligne au-dessus de la carte indique combien de sélecteurs ont été lus et lequel est le plus fort ; le bloc de copie reprend chaque score en texte brut.
A compte les sélecteurs d’ID comme #app. B compte les classes (.card), les sélecteurs d’attribut ([data-kind="docs"]) et les pseudo-classes (:hover, :focus-visible, :nth-child(2n+1)). C compte les sélecteurs de type (main, article, h2) et les pseudo-éléments (::before, ::selection). Le sélecteur universel * n’ajoute rien dans aucune colonne.
Les pseudo-classes fonctionnelles suivent la spécification : :where() compte zéro, tandis que :is(), :not(), :has() et la liste of de :nth-child() prennent la valeur de leur argument le plus fort ; c’est pourquoi :is(.featured, #hero) vaut un ID. ::part() et ::slotted() comptent chacun comme un pseudo-élément, et leur argument n’ajoute rien.
Une liste séparée par des virgules sur une ligne est traitée pour ce qu’elle est : plusieurs sélecteurs. a, b devient deux lignes de 0-0-1. Chaque ligne est d’abord validée par l’analyseur du navigateur ; celle qu’il refuse — un combinateur orphelin, un triple deux-points — reste affichée, marquée Sélecteur invalide, et sort du verdict du plus fort, car un sélecteur invalide n’atteint jamais la cascade.
Le score répond à une question : si deux de ces sélecteurs visent le même élément, quelle déclaration l’emporte au poids. Les couches, !important, les styles en ligne, l’ordre d’apparition et la proximité de portée peuvent encore renverser l’arithmétique ; un score plus faible dans une @layer antérieure peut gagner.
Toute la comparaison se fait dans l’onglet : les sélecteurs ne sont jamais envoyés. Il n’y a pas de limite fixe de lignes ; la carte, la ligne de verdict et le bloc de copie sont reconstruits ensemble pendant la frappe.
L’outil compare du texte, il n’applique pas votre feuille de style : rien n’est confronté à un document et les nombres sont les poids de la spécification, pas une prévision du style calculé. Pour un contrôle visuel, exécutez le sélecteur dans l’inspecteur du navigateur sur la page réelle.