CSS Specificity Calculator
Calculate, visualize, and compare CSS selector specificity scores. See exactly which selector wins in the cascade.
About This Tool
The CSS Specificity Calculator is a free, browser-based tool that helps you understand and compare the specificity of CSS selectors. CSS specificity is the algorithm browsers use to determine which styles to apply when multiple rules target the same element. A selector with higher specificity always wins, regardless of source order, which makes understanding specificity essential for debugging layout and styling issues.
Specificity is calculated as a four-part tuple
(a, b, c, d) where a counts inline
styles, b counts ID selectors, c
counts class selectors, attribute selectors, and pseudo-classes,
and d counts element (type) selectors and
pseudo-elements. The universal selector *,
combinators (>, +, ~,
), and the :where() pseudo-class
contribute zero specificity. The :not(),
:is(), and :has() pseudo-classes take the
specificity of their most specific argument.
This tool parses your selector in real time, tokenizes it into its constituent parts, color-codes each component by specificity level (IDs in red, classes in green, elements in blue), and displays the final score. The comparison mode lets you add up to 10 selectors and instantly see which one wins, with a visual bar chart showing relative weights. This is invaluable when debugging CSS cascade issues or refactoring stylesheets.
The !important declaration is also detected and
flagged with a warning, since it overrides normal specificity rules
entirely. All processing happens in your browser — no data is
sent to any server, and there are no third-party scripts involved.
How to Use
- Type a CSS selector into the CSS Selector input field. The specificity is calculated in real time as you type.
- Review the color-coded breakdown below the input. Each token is labeled with its specificity level (ID, class, or element).
- Press Enter or click Add to add the selector to the comparison list.
- Add more selectors (up to 10) to compare them side by side. You can enter comma-separated selectors to add multiple at once.
- Use the Preset Examples buttons to load common selector comparisons and see how specificity works in practice.
- The comparison list is automatically sorted from highest to lowest specificity. The winning selector is highlighted with a trophy icon and a gold border.
- Click Copy All (or press Ctrl+Shift+C) to copy all results to your clipboard, or Clear to start over.
FAQ
What is CSS specificity?
CSS specificity is the set of rules a browser uses to decide which CSS property values are applied to an element when multiple conflicting rules match. Each selector is assigned a specificity weight, and the rule with the highest weight wins. Specificity is expressed as a tuple (a, b, c, d) where a = inline styles, b = IDs, c = classes/attributes/pseudo-classes, and d = elements/pseudo-elements.
How does !important affect specificity?
The !important declaration does not change a selector's specificity score. Instead, it creates a separate layer in the cascade that takes priority over all normal declarations. If two rules both use !important, specificity is then used to break the tie between them. Overusing !important is considered bad practice because it makes styles harder to override and maintain.
What specificity does :not(), :is(), and :has() have?
The :not(), :is(), and :has() pseudo-classes themselves contribute zero specificity. However, their specificity is determined by the most specific selector in their argument list. For example, :is(#id, .class) has the same specificity as #id (0, 1, 0, 0) because #id is the most specific argument.
What is the specificity of :where()?
The :where() pseudo-class always has zero specificity, regardless of its arguments. This makes it useful for writing base styles that can be easily overridden. For instance, :where(#id) has a specificity of (0, 0, 0, 0), while :is(#id) has a specificity of (0, 1, 0, 0).
Do combinators affect specificity?
No. Combinators such as the descendant combinator (space), child combinator (>), adjacent sibling combinator (+), and general sibling combinator (~) do not contribute to specificity. Only the simple selectors they connect matter. Similarly, the universal selector * has zero specificity.
What happens when two selectors have equal specificity?
When two selectors have identical specificity, the cascade uses source order as the tiebreaker: the rule that appears last in the stylesheet wins. This is why the order of your CSS rules matters, and why you might see unexpected behavior if you reorder your imports or move rules between files.
Is my data sent to a server?
No. The CSS Specificity Calculator runs entirely in your browser. Selectors are parsed and scored locally using JavaScript. There are no server requests, no data collection, and no third-party scripts. Your selectors never leave your device.
Related Tools
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Tailwind CSS Converter
Convert plain CSS to Tailwind CSS utility classes. Paste CSS rules and get equivalent Tailwind classes instantly.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
CSS Filter Generator
Design CSS filter effects visually with sliders for blur, brightness, contrast, grayscale, and more. Live preview and generated code.
z-index Manager
Design and manage CSS z-index layer hierarchies visually. Generate CSS variables, Sass maps, or JS/TS objects with conflict detection.
CSS Selector Reference
Complete interactive CSS selector reference with specificity calculator, live preview, searchable categories, and browser support for every selector.
CSS Selector Tester
Test CSS selectors against HTML markup and see matching elements highlighted.