CSS Specificity Calculator
Calculate and compare CSS selector specificity values. Understand which styles will be applied.
Add Selector
How Specificity Works
CSS specificity is calculated using four values (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Higher specificity wins. When equal, the last rule defined applies.
Calculated Selectors
No selectors added yet. Enter a CSS selector above to calculate its specificity.
Examples
Click any example to add it to your comparison.
p
(0,0,0,1)
Single element selector
.button
(0,0,1,0)
Class selector
#header
(0,1,0,0)
ID selector
div p
(0,0,0,2)
Two element selectors
.nav .menu
(0,0,2,0)
Two class selectors
#nav .menu li
(0,1,1,1)
ID, class, and element
a:hover
(0,0,1,1)
Element with pseudo-class
input[type='text']
(0,0,1,1)
Element with attribute
ul li:first-child
(0,0,1,2)
Elements with pseudo-class
#header .nav a.active
(0,1,2,1)
Complex selector
.btn.btn-primary.btn-lg
(0,0,3,0)
Multiple chained classes
body #content .post p:first-of-type
(0,1,2,2)
Deep nested selector