Analysez la specificite de vos selecteurs CSS en temps reel. Score visuel (a,b,c,d), mode comparaison, guide de reference complet.
Comprendre la specificite CSS, c'est comprendre pourquoi certaines réglés l'emportent sur d'autres. Un outil indispensable pour tout développeur frontend.
Saisissez un selecteur CSS pour voir sa specificite
| Niveau | Exemple | Score | Description |
|---|---|---|---|
| Inline | style="..." | (1,0,0,0) | Attribut style directement sur l'élément HTML. crase tout selecteur. |
| ID | #header, #main, #nav | (0,1,0,0) | Selecteurs d'identifiant. Tres spécifiques, e utiliser avec parcimonie. |
| Classes / Attributs / Pseudo-classes | .class, [attr], :hover | (0,0,1,0) | Selecteurs de classé, d'attribut et pseudo-classes. Niveau intermediaire. |
| lements / Pseudo-éléments | div, ::before, h1 | (0,0,0,1) | Selecteurs de type et pseudo-éléments. Specificite la plus faible. |
| Selecteur | Inline | ID | Classe | lement |
|---|---|---|---|---|
* | 0 | 0 | 0 | 0 |
div | 0 | 0 | 0 | 1 |
.class | 0 | 0 | 1 | 0 |
[data-type] | 0 | 0 | 1 | 0 |
:hover | 0 | 0 | 1 | 0 |
::before | 0 | 0 | 0 | 1 |
div.class | 0 | 0 | 1 | 1 |
#id | 0 | 1 | 0 | 0 |
#id.class | 0 | 1 | 1 | 0 |
ul > li.active | 0 | 0 | 1 | 2 |
a[href^="https"]:hover | 0 | 0 | 2 | 1 |
div#main.content | 0 | 1 | 1 | 1 |
style="color:red" | 1 | 0 | 0 | 0 |
#header .nav a.active:hover | 0 | 1 | 3 | 2 |
ul#nav li.active[data-type] | 0 | 1 | 2 | 2 |
div:not(.hidden) | 0 | 0 | 1 | 1 |
Comprendre la specificite CSS est essentiel pour tout développeur web. C'est ce qui determine quelle réglé de style s'applique quand plusieurs selecteurs ciblent le même élément. Notre calculateur gratuit vous donne le score précis (a,b,c,d) de n'importe quel selecteur, en temps reel, sans envoyer vos données sur un serveur.
Parce qu'on a tous passe des heures e debugger un style qui ne s'applique pas sans comprendre pourquoi. Parce que la specificite CSS est un concept simple mais crucial, et qu'un calculateur visuel rend l'apprentissage immédiat. Et parce qu'on voulait un outil 100% gratuit, sans pub et 100% cete client.
“Enfin un calculateur de specificite CSS clair et gratuit. Le mode comparaison m'a sauve des heures de debug.”
Thomas L.
développeur frontend
“Je l'utilisé pour mes formations CSS. L'affichage visuel des scores (0,0,0,0) rend la specificite concrete pour les debutants.”
Camille R.
Formatrice web
“Le tableau des exemples est genial. Je l'utilisé comme memo quand j'ecris du CSS pour eviter les conflits.”
Mehdi K.
Integrateur web
La specificite est le mecanisme par lequel les navigateurs determinent quelle réglé CSS s'applique e un élément quand plusieurs réglés le ciblent. C'est l'un des piliers de la cascade CSS, avec l'ordre d'importation et le !important. Sans une bonne comprehension de la specificite, vous passez votre temps e ajouter des !important ou e reordonner vos feuilles de style dans l'espoir (vain) de resoudre vos conflits.
Notre calculateur vous aide e visualiser le poids exact de chaque selecteur. Vous pouvez tester des selecteurs reels de votre projet, les comparer entre eux, et comprendre instantanément pourquoi l'un l'emporte sur l'autre. C'est un outil aussi bien pour l'apprentissage que pour le debogage de feuilles de style complexes.
L'analyse se fait entièrement dans votre navigateur, en temps reel, e chaque frappe. Aucune donnée n'est transmise e un serveur. Le calcul suit l'algorithme défini par la specification W3C pour les selecteurs CSS.
div#main .content > p.active).Il existe plusieurs calculateurs de specificite CSS en ligne. Nous les avons testes sur 12 criteres pour vous aider e choisir. Notre avantage : le mode comparaison, l'interface visuelle complete avec barre de score, et le fonctionnement 100% hors ligne.
| Volade | Specificity.keegan.st | CSS Specificity Calculator | Polypane | Specificity Calculator | Evolve CSS | CodePen | |
|---|---|---|---|---|---|---|---|
| Calcul en temps reel | |||||||
| Score visuel (a,b,c,d) avec barre | |||||||
| Mode comparaison | |||||||
| Tableau d'exemples intégré | |||||||
| Guide de reference | |||||||
| Support :is() / :not() avance | V+ | Partiel | Partiel | ||||
| Historique des tests | V+ | ||||||
| Export TXT / PDF | V+ | ||||||
| 100% cete client (zero serveur) | |||||||
| Gratuit sans compte | Partiel | ||||||
| Mode hors ligne complet | |||||||
| Sans pub intrusive |
Teste en juillet 2026. "Partiel" = Fonctionnalite limitee ou necessitant un compte payant.
| Fonctionnalite | Gratuit | V+ Premium |
|---|---|---|
| Calcul en temps reel | ||
| Score visuel (a,b,c,d) | ||
| Barre de specificite relative | ||
| Mode comparaison (2 selecteurs) | ||
| Tableau d'exemples courants | ||
| Guide de reference | ||
| Analyse :is() / :not() / :has() avancee | ||
| Historique des selecteurs testes | 10 entrées | 100 entrées |
| Export des resultats en TXT/PDF | ||
| Mode hors ligne complet | ||
| Sans publicite ni tracking | ||
| Support prioritaire |
Contrairement aux calculateurs en ligne qui envoient vos selecteurs sur leurs serveurs, notre outil traite tout localement. Meme hors ligne une fois la page chargee. Verifiable dans les outils développeur Network.
Des selecteurs trop spécifiques (ex: #header .nav ul li a.active) rendent votre CSS rigide et difficile e maintenir. Un petit changement HTML peut casser tout votre design. Preferez des classes simples et spécifiques au juste nécessaire.
Des questions sur la specificite CSS, le calcul ou les Fonctionnalites V+ ? Nous les avons rassemblees ci-dessous. Si la vetre n'y figure pas,n'hesitez pas e nous contacter.
La specificite est un poids e 4 niveaux (a,b,c,d) : (a) styles inline, (b) IDs, (c) classes/attributs/pseudo-classes, (d) éléments/pseudo-éléments. Chaque niveau ecrase les niveaux inférieurs.
Exportez vos analyses en TXT/PDF, accedez e l'analyse avancee :is() / :not() / :has(), beneficiez d'un historique illimite et d'analyses plus profondes.
Essayez gratuitement pendant 14 jours. Sans engagement. Annulable e tout moment.
Derniere mise e jour : juillet 2026. Sources : W3C CSS Selectors Level 4, MDN Web Docs, Specificity Specification, CSS-Tricks Almanac.