Comment l’utiliser

Quatre étapes : coller, lancer, vérifier, copier. Tout reste dans le navigateur.

Collez votre contenu

Ajoutez du CSS, HTML, JSON ou autre texte. Rien n’est envoyé.

Lancez l’outil

Cliquez sur Convertir ou Exécuter. Le résultat s’affiche tout de suite.

Vérifiez la sortie

Lisez le code généré et les notes avant de l’utiliser.

Copiez et utilisez

Copiez le résultat et collez-le dans votre projet.

À 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.

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.active

Sortie

Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2

Conseil

Si !important revient sans cesse dans votre feuille, la vraie dette se situe du côté de la spécificité.