Work out which CSS rule actually wins
Enter two selectors and see which one the browser applies, with the specificity worked out for each. Selectors built from :is() or :where() can throw the count off, so treat the result as a starting point, not a verdict.
CSS Specificity Calculator: work out which selector actually wins
A CSS Specificity Calculator breaks a selector down into its ID, class and element weight and shows how it ranks against another selector fighting for the same property. This is for anyone who has added a style, watched nothing change, and gone hunting through the stylesheet for whatever is overriding it. Once you can read the score, you can spot a conflict before you write the selector.
-
Enter the selectors in question
Paste in the two or more selectors competing for the same element, exactly as they appear in the stylesheet.
-
Read the specificity breakdown
Check the ID, class and element counts for each selector, since the highest ID count wins regardless of how many classes or elements sit below it.
-
Work out why a rule is losing
Use the ranking to decide whether to raise the specificity of the selector, remove the rule that's blocking it, or reorder the rules instead, since a later rule of equal specificity or an !important declaration can still override the calculation.
CSS Specificity Calculator
Paste two CSS selectors below to see exactly how their specificity is calculated, and which one would win in a cascade conflict. Counts update as you type.
Breakdown
Result
Specificity is shown as three numbers: IDs, then classes/attributes/pseudo-classes,
then elements/pseudo-elements. A higher number in an earlier position always wins,
no matter how many lower-priority selectors are added. If both selectors are identical
in specificity, the one that appears later in the stylesheet wins, and an
!important declaration overrides normal specificity rules entirely.
Find out which CSS rule actually wins
Two selectors can point at the same element, and the browser has to pick one. This works out the specificity score for each side of that clash and tells you which rule actually wins, so you can stop reaching for !important to force a fix. It's built for debugging a stylesheet you already know your way around.
No account needed · works on any device · free
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio CalculatorCSS Grid Architect
An interactive CSS Grid Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Grid Architect