Calculateur de spécificité CSS
Calculez la spécificité du sélecteur.
À propos de cet outil
Le calculateur donne la spécificité classique (a,b,c) d’un sélecteur, ce qui explique pourquoi une règle en écrase une autre sans passer par les DevTools. Il analyse le sélecteur seul, sans tenir compte de @layer.
Comment l’utiliser
Saisissez ou collez le sélecteur, lancez le calcul, puis lisez la répartition entre identifiants, classes et éléments. Une spécificité basse facilite les surcharges futures.
Exemple
Le sélecteur d’exemple mêle éléments et classes, comme un CSS de navigation ancien.
Entrée
nav.site-header .menu a.activeSortie
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2Conseil
Si !important revient sans cesse dans votre feuille, la vraie dette se situe du côté de la spécificité.
Bon à savoir
Comment la spécificité est-elle calculée ?
Trois groupes sont comptés : les ID, puis les classes, attributs et pseudo-classes, puis les éléments et pseudo-éléments. Le résultat s'affiche sous la forme (a,b,c) et se compare de gauche à droite.
!important ou un style en ligne apparaissent-ils ici ?
Non. Ils se situent hors du sélecteur et ne comptent donc pas dans le score (a,b,c). Un style en ligne ou !important l'emporte sur toute spécificité de sélecteur.