Aller au contenu
TextArray1.41.0
Tout en local

Calculatrice de spécificité CSS

Calcule la spécificité des sélecteurs CSS et voit lequel l'emporte.

Entrée
Sortie
Outils connexes
Formateur CSSOutils de développement
Minificateur CSSOutils de développement
Convertisseur d'unités CSSOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Calculatrice de spécificité CSS
Colle un ou plusieurs sélecteurs CSS, un par ligne, et cet outil calcule la spécificité de chacun sous la forme du score standard en trois parties : IDs, classes (plus attributs et pseudo-classes) et éléments (plus pseudo-éléments). La spécificité détermine quelle règle de conflit un navigateur applique, c'est donc utile quand deux règles de style ciblent le même élément et que tu dois savoir laquelle l'emporte, ou quand tu débogues pourquoi une annulation ne fonctionne pas.
Active Diviser les listes séparées par des virgules pour noter chaque sélecteur d'une liste comme ".a, .b" sur sa propre ligne au lieu de les combiner en un. Trier par le plus fort en premier réordonne les résultats du plus haute spécificité au plus basse. Choisis Tableau pour une disposition en colonnes avec les IDs, classes et éléments détaillés, ou notation 0-1-2 pour un score compact comme "1-0-2" par sélecteur. Afficher l'explication du détail liste quelle partie de chaque sélecteur — un ID, une classe, un élément — a contribué au score, ce qui est le moyen le plus rapide de voir exactement pourquoi une règle surpasse une autre.
La calculatrice suit la spécification CSS Selectors pour les cas délicats : :where() obtient toujours zéro, peu importe ce qui se trouve à l'intérieur, tandis que :is(), :not() et :has() prennent la spécificité de l'argument le plus spécifique. Un sélecteur contenant !important est signalé, car il annule la cascade normale indépendamment de la spécificité et c'est bon à savoir même s'il ne fait pas partie du score du sélecteur lui-même. Les sauts de ligne Windows et Unix sont traités de la même manière, et les lignes vides sont ignorées.
Tout fonctionne localement dans votre navigateur — les sélecteurs que tu colles ne sont jamais téléchargés n'importe où, ce qui importe si tu vérifies contre une base de code privée. Copie le résultat, télécharge-le en tant que fichier .txt, ou envoie la sortie dans l'entrée pour continuer à affiner tes sélecteurs.
FAQ
Que signifie la notation 0-1-2?
Chaque nombre est un niveau de spécificité : le premier compte les sélecteurs ID, le second compte les classes, les attributs et les pseudo-classes, et le troisième compte les sélecteurs d'éléments et de pseudo-éléments. Un sélecteur avec un nombre de premier rang plus élevé l'emporte toujours sur celui ayant uniquement un nombre de deuxième ou troisième rang plus élevé.
Comment :not(), :is() et :has() sont-ils notés?
Ces pseudo-classes prennent la spécificité du sélecteur le plus spécifique à l'intérieur de leurs parenthèses — :not(.a, #b) note aussi haut que #b — plutôt que d'ajouter leur propre poids. :where() est l'exception : il note toujours zéro, peu importe la complexité de la liste des sélecteurs à l'intérieur.
!important affecte-t-il le score de spécificité?
Non. !important annule la cascade normale quelle que soit la spécificité, donc il ne change pas le score d'un sélecteur. L'outil marque les sélecteurs qui le contiennent comme une note séparée, car il est facile de l'oublier lors de la comparaison des règles.
Que se passe-t-il avec une liste séparée par des virgules comme ".a, .b"?
Avec Diviser les listes séparées par des virgules activé, chaque sélecteur de la liste est noté sur sa propre ligne, correspondant à la façon dont un navigateur les évalue réellement. Désactive l'option pour noter toute la ligne comme un sélecteur combiné à la place.
Mes CSS sont-elles téléchargées quelque part?
Non. La spécificité est calculée entièrement dans ton navigateur — les sélecteurs que tu colles ne quittent jamais ton appareil.