CSS Specificity Analyzer
Analyze multiple CSS selectors at once — get ranked specificity scores in (a,b,c,d) notation, compare, and export as a table.
About this tool
CSS specificity is the algorithm browsers use to decide which CSS rule wins when multiple rules target the same element. It's expressed as a four-component tuple (a,b,c,d): a counts inline styles (always 0 for selectors), b counts ID selectors, c counts class selectors, attribute selectors, and pseudo-classes, d counts type (element) selectors and pseudo-elements. Higher tuples win — (0,1,0,0) beats (0,0,99,0).
Examples:
#main .card h2→ (0,1,1,1) — one ID, one class, one element. Wins against any selector without an ID.header nav a:hover→ (0,0,3,1) — four elements (header, nav, a) plus one pseudo-class (:hover). Wait, let me recount: header(1 element) + nav(1) + a(1 element) + :hover(1 pseudo-class = 1 class-level) → (0,0,1,3). This is a real example showing how pseudo-classes add tocwhile element names add tod.
FAQ
What does (0,1,2,1) mean? ›
The tuple is (inline-styles, IDs, classes+attributes+pseudo-classes, elements+pseudo-elements). So (0,1,2,1) means zero inline styles, one ID, two class-level items, and one element-level item. When comparing two selectors, compare column by column left to right — the first column that differs decides the winner.
Why does #header beat .header in a conflict? ›
Because #header has specificity (0,1,0,0) and .header has (0,0,1,0). The browser compares left to right: both have 0 inline styles, but #header has 1 in the ID column while .header has 0, so #header wins immediately.
Does !important affect specificity? ›
Yes, but it sits outside the specificity system. An !important rule in a stylesheet overrides non-!important rules regardless of specificity. Two !important rules are compared by specificity as usual. Important inline styles beat important stylesheet rules.
How do :not(), :is(), and :where() affect specificity? ›
:not() takes the specificity of its argument, :is() takes the specificity of its most specific argument, and :where() always has zero specificity — it's a way to write selectors for grouping without adding weight.
I only need to compare two selectors side by side ›
Use the <a href="/tools/css-specificity-calculator/">CSS Specificity Comparator</a> for a focused two-selector comparison with visual bars showing each component (IDs, classes, elements). It declares a winner and explains why.