CSS Specificity Calculator
CSS specificity calculator: score selectors as (a,b,c) tuples and compare them to debug cascade conflicts. Free, browser-local, no upload.
Runs locally in your browser. Your input is not uploaded to DevToolMate servers.
Specificity tuple
Output is (a, b, c) for IDs, classes/attributes/pseudo-classes, and types/pseudo-elements.
Developer Quick Tips
- Paste one CSS selector like nav.header a.active:hover to get its (a, b, c) tuple; enter a second selector separately to compare specificity wins.
- Tuple priority: a (IDs) beats b (classes/pseudo-classes) beats c (types/pseudo-elements); compare tuples to predict which selector wins in cascade conflicts.
- Debug CSS conflicts by scoring two selectors separately, then comparing tuples to see which specificity wins when rules collide on the same element.
- Remember !important and inline styles override selector specificity; this tool helps you understand cascade order when specificity alone won't solve conflicts.
- Your selector input runs entirely in your browser, never uploaded to servers; processing is local and private for the current session.
Frequently asked questions
How do I use the CSS specificity calculator to debug conflicts?
Paste a single CSS selector (e.g., #header.nav a:hover) into the input field. The tool instantly scores it as a (a, b, c) tuple: a for ID selectors, b for classes and pseudo-classes, c for type selectors and pseudo-elements. Enter a second selector separately to compare tuples and predict which rule wins. Calculation is local and text-based; no styles are applied to your page.
What is CSS specificity and why does it matter?
CSS specificity determines which rule applies when multiple selectors target the same element. Higher specificity wins. The (a, b, c) tuple represents ID selectors (a), classes/attributes/pseudo-classes (b), and type selectors/pseudo-elements (c). Understanding specificity helps you debug cascade conflicts and avoid over-using !important.
How do I compare two CSS selectors to see which has higher specificity?
Enter each selector separately into the calculator to get its (a, b, c) tuple. Compare the tuples: higher a wins first, then b, then c. This helps you predict which rule will apply when specificity is the deciding factor in your stylesheet and resolve cascade conflicts.
Is the CSS specificity calculator free and private?
Yes. CSS Specificity Calculator is free with no account required. Your selector input runs entirely in your browser and is never uploaded to DevToolMate servers. Processing is local and private; input is cleared when you close the tab.
Does this tool account for !important and source order?
The specificity tuple does not include !important, which is a cascade flag that overrides specificity. Source order matters only when specificity is equal. This tool helps you understand selector weight; use it alongside your knowledge of cascade rules to debug conflicts.
Can I paste full CSS rule blocks into the calculator?
No. Enter selector text only; full CSS rule blocks with braces are rejected. Paste one selector at a time (e.g., nav.header a.active:hover) to score it. The tool analyzes selectors as text without applying styles to your page.
Related tools
- CSS Formatter: Format and beautify CSS online in your browser. Pretty-print minified stylesheets with custom indentation. No upload, no account, privacy-first.
- CSS Filter Generator: CSS filter online generator. Adjust blur, brightness, contrast, saturate, grayscale with live preview. Copy or download filter.css. Browser-local, no upload, no account.