Collez le fragment HTML et le sélecteur. Les correspondances dépendent du navigateur ; le résumé n’analyse pas toute la cascade.
Fonctionne localement dans votre navigateurCollez un fragment HTML et un sélecteur CSS, puis cliquez sur Tester le sélecteur. Le fragment est analysé dans un document à part qui n'est jamais rattaché à la page, et le sélecteur passe par le querySelectorAll du navigateur : un sélecteur qui correspond ici est un sélecteur que votre navigateur accepte.
Le résumé affiche la spécificité du groupe le plus spécifique, le nombre d'éléments trouvés et le nombre de groupes séparés par des virgules. Chaque résultat apparaît sous la forme balise#id.classe avec les 150 premiers caractères de son texte.
a compte les sélecteurs d'ID, b compte les classes, les attributs et les pseudo-classes, et c compte les sélecteurs de type et les pseudo-éléments. Le sélecteur universel compte zéro : * vaut 0,0,0, .card > a#download vaut 1,1,1, ul li::before vaut 0,0,3 et [href] vaut 0,1,0.
Avec un sélecteur séparé par des virgules, la tuile affiche le groupe le plus spécifique, c'est-à-dire la valeur appliquée par le navigateur aux déclarations écrites dans ce groupe : a, #b donne 1,0,0. Ni !important, ni l'ordre des @layer, ni l'héritage ne sont pesés ici : ce sont des comptes de spécificité, pas une simulation de la cascade.
:not(), :is() et :has() comptent comme leur argument le plus spécifique : :is(#a, .b) vaut 1,0,0, :not(.a) vaut 0,1,0 et :where(#a) vaut 0,0,0. :nth-child(2 of .a) ajoute la liste qui suit of, ce qui donne 0,2,0.
Un caractère échappé reste dans son identifiant : .a\.b est une seule classe (0,1,0). Un préfixe d'espace de noms n'est pas un sélecteur de type : svg|circle compte un type, pas deux.
Le fragment est analysé sans feuille de style : rien n'est mis en page et aucun élément n'a d'état. p:hover, p:visited et p:focus ne correspondent à rien ici. Les scripts du fragment ne s'exécutent pas et les images ne sont pas téléchargées.
La correspondance dépend de votre navigateur. Chrome refuse svg|circle et [href i], et la barre d'état affiche alors ce message au lieu d'un résultat. Les fragments longs sont traités en entier : un tableau de 400 lignes a produit 400 fiches.