CSS Specificity Calculator
Paste a CSS selector and see its specificity broken down as an (inline, ID, class, element) tuple, explained clearly.
Paste a CSS selector below - this tool counts its ID, class/attribute/pseudo-class, and element/pseudo-element selectors and shows the resulting specificity.
This parses common selector syntax - it does not execute CSS. Inline style attributes and !important override specificity entirely and aren't reflected in this tuple.
When two rules have equal specificity, the one that appears later in the stylesheet (or was added later) wins - specificity alone doesn't determine the outcome in a tie.
How CSS Specificity Works
Specificity is calculated as a three-part value: the count of ID selectors, the count of class/attribute/pseudo-class selectors, and the count of element/pseudo-element selectors - compared left to right, so a single ID always outweighs any number of classes.
Why Use This Tool?
When two CSS rules conflict, specificity (not just source order) usually determines which one wins - and manually counting selector parts in a complex selector is easy to get wrong, especially with combinators and pseudo-classes mixed together.
How to Use It
- Paste a CSS selector (e.g.
#nav .item:hover a.active). - Review the specificity breakdown: ID count, class/attribute/pseudo-class count, and element count.
- Compare two selectors' tuples to see which would win.
Limitations
This parses common selector syntax (IDs, classes, attributes, pseudo-classes, elements, combinators) - it does not execute or apply CSS, and unusual or malformed selectors may not parse perfectly. Inline style attributes and !important override specificity entirely and are explained but not something this tool parses from your actual HTML.