Calculateur de Spécificité CSS
Calculez la spécificité de n'importe quel sélecteur CSS. Comparez deux sélecteurs, comprenez quelle règle l'emporte, et apprenez le système de notation de spécificité.
Load a preset into Selector A
Specificity Scoring
ID selectors — (a)
#header, #nav
Class / attr / pseudo-class — (b)
.btn, [type=text], :hover
Type / pseudo-element — (c)
div, p, h1, ::before
Universal selector (*), combinators, and :where() contribute 0 specificity.
Comment utiliser Calculateur de Spécificité CSS
- 1Entrez un sélecteur CSS dans le champ de saisie.
- 2Consultez le score de spécificité décomposé par ID, classe et élément.
- 3Entrez éventuellement un deuxième sélecteur pour comparer lequel l'emporte.
- 4Comprenez les règles de cascade pour vos sélecteurs.
ZenovayAnalytics
Voyez qui est sur votre site en ce moment.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Formateur et Validateur JSON
Formatez, validez et embellissez les données JSON avec la coloration syntaxique et la détection d'erreurs.Décodeur JWT
Décodez et inspectez les jetons JWT. Consultez l'en-tête, la charge utile et vérifiez les signatures.Encodeur/Décodeur Base64
Encodez du texte en Base64 ou décodez Base64 en texte. Supporte UTF-8 et les données binaires.Encodage / Décodage URL
Encodez ou décodez les composants URL. Traitez les caractères spéciaux, les chaînes de requête et les URL complètes.Questions fréquemment posées
Comment la spécificité CSS est-elle calculée ?▾
La spécificité CSS est calculée comme un triple (a, b, c) : a = nombre de sélecteurs ID (#id), b = nombre de sélecteurs de classe (.class), sélecteurs d'attributs ([attr]) et pseudo-classes (:hover), c = nombre de sélecteurs de type (div, p) et pseudo-éléments (::before). Les styles en ligne ont une spécificité (1,0,0,0) — au-dessus de toutes les règles de feuille de style. !important remplace toute spécificité. Le sélecteur universel (*), les combinateurs (+, >, ~, espace) et :is()/:not() n'ajoutent pas de spécificité.
Quel sélecteur gagne en cas de conflit ?▾
Le sélecteur ayant la spécificité la plus élevée gagne. Si les spécificités sont égales, la règle qui apparaît plus tard dans la feuille de style gagne (ordre source). Pour comparer : (1,0,0) bat (0,9,9) parce que les ID surpassent n'importe quel nombre de classes. La comparaison n'est pas arithmétique — elle est lexicographique : comparez d'abord (a), puis (b), puis (c). Un ID surpasse toujours n'importe quel nombre de classes.
Quelle est la spécificité de :is(), :not() et :where() ?▾
:is() et :not() prennent la spécificité de leur argument le plus spécifique : :is(#id, .class) a une spécificité (1,0,0) parce que #id est l'argument le plus spécifique. :where() a toujours une spécificité zéro quel que soit ses arguments — utile pour les classes utilitaires que vous voulez facilement surcharger. :not() lui-même contribue zéro mais l'argument à l'intérieur contribue normalement.
Comment !important affecte-t-il la spécificité ?▾
!important remplace toute spécificité pour la propriété à laquelle elle s'applique. Cependant, elle ne change pas le score de spécificité. Deux déclarations avec !important sont comparées par spécificité normalement. Meilleure pratique : évitez !important. Si vous devez remplacer une feuille de style tierce, essayez plutôt d'augmenter la spécificité. Utilisez !important uniquement pour les classes utilitaires qui ne doivent jamais être surchargées, comme .visually-hidden ou .sr-only.
Quelle est la spécificité des styles en ligne ?▾
Les styles en ligne (style="color: red") ont la spécificité la plus élevée de n'importe quelle règle basée sur des sélecteurs, écrite comme (1,0,0,0) dans la notation à 4 parties qui inclut l'en ligne. Aucun sélecteur dans une feuille de style ne peut remplacer un style en ligne sans !important. C'est pourquoi les frameworks CSS évitent souvent les styles en ligne — ils sont trop difficiles à remplacer. Utilisez plutôt les propriétés personnalisées CSS ou les classes à la place des styles en ligne pour un code maintenable.