CSS Specificity Calculator

Paste in two conflicting selectors — say .card .title and #main .title.featured — and this tool breaks down each one’s specificity score (inline styles, IDs, classes/attributes/pseudo-classes, and elements, in that order of weight) and tells you which one wins when both apply to the same element. It’s the fastest way to answer “why is my CSS not applying” when the property is clearly defined but something else is overriding it, without manually counting IDs and classes in your head or reaching for !important as a workaround that just creates the next specificity fight.

FAQ

Why does a single class selector sometimes beat a selector with three element tags? 

Specificity weighs class selectors more heavily than element selectors regardless of count — one class always outranks any number of element selectors alone, which surprises people who assume “more selectors” automatically means “wins.”

Does !important show up in the specificity calculation? 

No — !important overrides specificity entirely rather than being part of it, which is exactly why relying on it tends to create harder problems later: it wins regardless of specificity, including against more specific selectors added afterward.

Why do two selectors with the same specificity score behave differently? 

When specificity is tied, the selector that appears later in the stylesheet (or later in cascade order, accounting for layers and source order) wins — this is worth checking if the calculator shows equal scores but one rule is still visibly overriding the other.

If a specificity conflict turns out to be caused by leftover, redundant rules rather than a genuine cascade decision, the Remove Duplicate CSS tool is worth running to clean up the stylesheet rather than just working around the conflict.