CSS Specificity Calculator

Calculate specificity scores and compare selectors to see which one wins.

How to Use CSS Specificity Calculator

Enter InputFill in the fields above

ProcessClick the button to run the tool

Get ResultCopy your output instantly, no signup needed

CSS Specificity Calculator — Free Developer Utility

CSS Specificity Calculator scores each selector using the standard (ID, class, element) specificity model so you can predict which CSS rule wins when multiple rules target the same element — a frequent source of "why isn't my style applying" confusion. Specificity is calculated as three numbers: ID selectors count as 100 points each, class selectors/attribute selectors/pseudo-classes count as 10 points each, and element selectors/pseudo-elements count as 1 point each. Paste multiple selectors, one per line, and this tool calculates each one's specificity and sorts them by which would win in the cascade. This is especially useful when debugging why a more specific-looking selector is being overridden, or when deciding how specific to make a new rule without resorting to !important.

Keywords and Search Terms

Developers searching for this tool use terms like: css specificity calculator, css specificity, selector priority, css cascade, specificity score. Tooliby provides this utility free with no signup, no watermarks, and no data logging.

Privacy — Your Data is Never Stored

Every input you paste into Tooliby developer tools is processed in memory and immediately discarded. We do not log inputs, store results, or analyze your data.

Frequently Asked Questions

CSS specificity, not source order, usually decides the winner when specificity differs. A highly specific selector earlier in the file beats a less specific one later — only rules of equal specificity follow source order.

Yes, inline style= attributes have a specificity higher than any selector combination (except !important, which overrides everything).

Count IDs (worth 100), then classes/attributes/pseudo-classes (worth 10 each), then elements/pseudo-elements (worth 1 each). Compare left to right — more IDs always wins regardless of the other counts.

Avoid it when possible — it breaks the normal cascade and makes future overrides harder. Increasing selector specificity or reorganizing your CSS is usually the better fix.