Outils de développement

Calculateur de spécificité CSS

Calculez la spécificité de vos sélecteurs CSS, déterminez le vecteur de priorité et obtenez un score numérique pondéré.

Exécuter l’outil

Ce calculateur analyse la spécificité de vos sélecteurs CSS et décompose leur poids selon les règles standards de priorité. L'outil accepte un sélecteur textuel optionnel et identifie les différents composants : identifiants uniques, classes, attributs, pseudo-classes, éléments de type et pseudo-éléments. Chaque catégorie contribue directement au vecteur de spécificité sous la forme de quatre composantes distinctes. Les identifiants alimentent la première position, les classes, attributs et pseudo-classes la deuxième, tandis que les éléments et pseudo-éléments définissent la troisième. Le sélecteur universel n'ajoute aucun point au décompte. En plus du vecteur détaillé, le calculateur calcule un score numérique pondéré associant respectivement les facteurs 1000, 100, 10 et 1 aux quatre composantes. Si le champ de saisie reste vide ou ne contient que des espaces, le résultat affiche un vecteur nul et un score de zéro tout en conservant une chaîne vide.

Mode d’emploi

  1. Saisissez votre sélecteur CSS dans le champ texte dédié.
  2. Lancez le calcul pour analyser la chaîne fournie.
  3. Consultez les quatre composantes du vecteur de spécificité affichées à l'écran.
  4. Examinez le score numérique calculé à partir des pondérations respectives.

Exemples

  • Pour le sélecteur '#menu .nav-item a:hover', l'outil extrait 1 identifiant, 2 classes ou pseudo-classes et 1 élément pour produire le vecteur [1, 2, 1, 0].
  • Pour le sélecteur '.btn.btn-primary', l'outil comptabilise 2 classes pour un résultat de composantes [0, 2, 0, 0] avec un score pondéré de 200.

FAQ

Comment le sélecteur universel '*' est-il traité ?

Le sélecteur universel n'augmente aucune composante de spécificité et n'ajoute aucun point au score final.

Que se passe-t-il si aucun sélecteur n'est renseigné ?

Une entrée vide ou composée uniquement d'espaces produit quatre composantes nulles et un score égal à zéro.

Comment le score numérique global est-il calculé ?

Le score multiplie respectivement les quatre composantes par 1000, 100, 10 et 1, puis additionne les valeurs obtenues.

Intégrer cet outil

Ajoutez cet outil SmartPlusLab fonctionnel à votre site avec le code ci-dessous.