Catégorie: Développement
Calculateur de spécificité CSS
Comparez la spécificité de sélecteurs sous forme de score A-B-C
Saisissez un ou plusieurs sélecteurs CSS pour calculer leur spécificité sous forme de score ID-classe-élément (A-B-C), trié pour voir immédiatement quelle règle l'emporterait. Fonctionne entièrement dans votre navigateur.
| Sélecteur | Spécificité (A-B-C) | ID | Classes, attributs, pseudo-classes | Éléments, pseudo-éléments |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Quand deux règles CSS ciblent le même élément, c'est celle qui a la spécificité la plus élevée qui l'emporte, pas celle écrite en dernier. La spécificité se compte en trois nombres : A pour les sélecteurs d'ID, B pour les classes, attributs et pseudo-classes, et C pour les sélecteurs d'élément et les pseudo-éléments. Cet outil analyse chaque sélecteur saisi, y compris :not(), :is(), :has() et :where() qui a une spécificité nulle, et affiche son score A-B-C afin que vous puissiez comparer les sélecteurs directement au lieu de deviner.
Mode d'emploi
- Saisissez un sélecteur par ligne, par exemple #nav .item > a:hover.
- Lisez le score de spécificité A-B-C de chaque sélecteur.
- Triez par spécificité pour voir quel sélecteur l'emporterait en cas de conflit.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Mon CSS est-il envoyé quelque part ?
- Non. L'analyse se fait en JavaScript directement dans la page, donc les sélecteurs d'une feuille de style privée ne quittent jamais votre appareil.
- Comment sont notés :not(), :is() ou :has() ?
- Ces pseudo-classes reprennent la spécificité de leur argument le plus spécifique, conformément à la spécification CSS, tandis que :where() contribue toujours pour zéro, quel que soit son contenu.
- Un style en ligne ou !important influence-t-il ce score ?
- Non. Cet outil ne note que les sélecteurs. Un attribut style en ligne et !important annulent tous deux la spécificité normale plutôt que de s'ajouter au score A-B-C.