01
Comparer les colonnes dans l’ordre
Les ID passent avant les classes et attributs, puis viennent les types. Cent classes ne dépassent pas un ID ; les égalités conservent l’ordre saisi.
Outils de sélecteurs CSS
Calculateur de spécificité CSS
Saisissez un sélecteur par ligne. Les listes séparées par une virgule deviennent des candidats distincts ; le test HTML reste facultatif.
Calculateur de spécificité CSS
Un sélecteur par ligne ; les virgules externes sont séparées.
Saisissez un sélecteur.
Sélecteurs et HTML facultatif restent dans le navigateur, sans ressource externe.
Options
L’entrée a changé ; le résultat précédent est périmé.
Quand une règle semble ignorée, le Calculateur de spécificité CSS révèle les colonnes ID, classes et types avant toute modification de la feuille. La spécificité sélecteur CSS se compare de gauche à droite, sans conversion en nombre décimal.
Le calcul spécificité CSS peut expliquer un poids, mais pas à lui seul la déclaration appliquée. Pour vérifier la priorité sélecteur CSS dans un cas concret, ajoutez au besoin un fragment HTML et observez les correspondances séparément.
Pourquoi utiliser le Calculateur de spécificité CSS
Voir l’effet des pseudo-classes
:is(#dialog, .panel) reprend le poids de l’argument le plus fort ; :where(#dialog, .panel) vaut toujours zéro. Le Calculateur de spécificité CSS expose chaque contribution, y compris l’ID inattendu.
Distinguer poids et correspondance
#missing peut avoir un poids élevé sans correspondre au fragment HTML ; .card peut correspondre malgré un poids inférieur. Ces résultats sont côte à côte, sans prétendre désigner une règle gagnante.
Trois repères pour lire le résultat
02
Tester les arguments fonctionnels
Essayez les mêmes arguments dans :is() puis :where(). :nth-child(... of S) ajoute aussi le poids de sa propre pseudo-classe.
03
N’activer HTML qu’au besoin
Le fragment statique donne des nombres de correspondances, sans simuler hover, focus, pseudo-éléments rendus ni l’ensemble de la cascade.
Ce que montre le tableau
Détail A-B-C
Chaque sélecteur affiche les ID, les classes/attributs/pseudo-classes et les types/pseudo-éléments, avec les fragments qui contribuent.
Tri fidèle aux candidats
Une virgule de premier niveau sépare les branches. Le tri décroissant garde l’ordre initial des sélecteurs à égalité.
Correspondances locales
Un arbre HTML inerte permet de compter les éléments trouvés sans exécuter de script ni demander images ou styles externes.
Ce que le score ne tranche pas
- Pas de verdict de cascade
- Origine, importance, couche, propriété, portée et ordre du code comptent aussi. Ce calcul ne traite que le poids du sélecteur.
- Inline et !important sont à part
- Un attribut style ou !important ne constitue pas une quatrième contribution aux colonnes A-B-C du sélecteur.
- Une liste n’a pas de score unique
- Chaque branche séparée par une virgule porte son propre poids et peut viser des éléments différents ; elles sont donc affichées individuellement.
- Zéro correspondance ne veut pas dire zéro
- Un sélecteur conserve son poids même sans nœud trouvé. Le fragment statique ne reproduit ni hover, ni focus, ni le rendu des pseudo-éléments.
Questions sur le Calculateur de spécificité CSS
Comment utiliser le Calculateur de spécificité CSS ?
Écrivez un sélecteur par ligne ; les trois colonnes et les fragments contributeurs apparaissent. Les branches séparées par une virgule sont évaluées individuellement.
Quelles entrées et options le Calculateur de spécificité CSS accepte-t-il ?
:is(), :not(), :has() et :where() sont compris. Le test d’un fragment HTML est optionnel et désactivé au départ.
Comment afficher ou copier le résultat ?
Le tableau présente le score à côté de chaque candidat. Vous pouvez copier le rapport entier seulement si le résultat actuel ne contient aucune erreur.
Mes données, fichiers ou résultats sont-ils envoyés ?
Non. Les sélecteurs et le fragment sont traités localement dans une structure inerte, sans chargement de ressources externes.
Quelles fonctions cet outil ne prend-il pas en charge ?
Il n’analyse pas une feuille CSS complète, n’ouvre aucune URL et ne simule pas les états dynamiques comme hover.
Un score de sélecteur semble erroné ?
Essayer le Calculateur de spécificité CSS
Comparez quelques sélecteurs puis, si nécessaire, ajoutez un fragment HTML. Le Calculateur de spécificité CSS garde les deux conclusions distinctes.