CSS Specificity Calculator
Calculate the specificity of CSS selectors and compare which one wins.
Selectors
Quick Reference
#id+1 to IDs (a)
.class, [attr], :pseudo-class+1 to Classes (b)
element, ::pseudo-element+1 to Elements (c)
*0 specificity
!importantoverrides all
#header .nav > a:hoverWins1
IDs (a)
2
Classes (b)
1
Elements (c)
(1,2,1)
Specificity
Breakdown:
#header:hover.nava
.nav a.active0
IDs (a)
2
Classes (b)
1
Elements (c)
(0,2,1)
Specificity
Breakdown:
.nav.activea
Selector A wins with specificity (1,2,1) vs (0,2,1).
CSS specificity determines which rule wins when multiple rules target the same element. It is calculated as a three-part score (a,b,c): IDs have the highest weight, then classes/attributes/pseudo-classes, then elements/pseudo-elements. Higher specificity always overrides lower specificity, regardless of source order.
Frequently Asked Questions
- Specificity is a three-number score (a,b,c): a = ID selectors, b = class/attribute/pseudo-class selectors, c = element/pseudo-element selectors. Inline styles add a fourth level.
Related Tools
CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually