CSS Specificity Calculator
Developer ToolsParse CSS selectors to display (a,b,c) specificity scores with per-token breakdown and visual bar chart comparison
CSS Selectors
1
(1,2,1)
2
(0,5,1)
3
(0,2,1)
Specificity Comparison
(1,2,1)#header .nav > a:hoverHighest
1
2
1
(0,5,1).container .row .col input[type='text']:focus
5
1
(0,2,1)button.btn.btn-primary
2
1
#header .nav > a:hover(1,2,1)
#header1-0-0
⎵.nav0-1-0
⎵>⎵a0-0-1
:hover0-1-0
a — IDs
1
b — Classes/Attr
2
c — Elements
1
.container .row .col input[type='text']:focus(0,5,1)
.container0-1-0
⎵.row0-1-0
⎵.col0-1-0
⎵input0-0-1
[type='text']0-1-0
:focus0-1-0
a — IDs
0
b — Classes/Attr
5
c — Elements
1
button.btn.btn-primary(0,2,1)
button0-0-1
.btn0-1-0
.btn-primary0-1-0
a — IDs
0
b — Classes/Attr
2
c — Elements
1
About CSS Specificity Calculator
Parse CSS selectors to display (a,b,c) specificity scores with per-token breakdown and visual bar chart comparison