CSS Specificity Real Render Winner Rule CheckerUse the browser engine to verify which CSS rule actually wins
Why does this need to actually render, not just calculate?
Most CSS specificity calculators online just plug your selector into a formula and spit out a score — e.g. #main p scores (1,0,1), .card.active scores (0,2,0). But what a real browser decides when multiple rules conflict also depends on inheritance, cascade order, !important, and how each property is written across different rules — all of which theoretical calculators ignore. This tool takes a different approach: it renders your pasted HTML and CSS inside a hidden iframe so the browser actually applies the styles, then reads the real result back with getComputedStyle(). What you see is what the browser genuinely decided — not a number computed on paper.
How the (a, b, c) score actually compares — a worked example
CSS specificity is written as three numbers (a, b, c): a counts ID selectors, b counts class/attribute/pseudo-class selectors, c counts type/pseudo-element selectors. Comparison works like comparing digits — whichever has a higher 'a' wins outright, and you only move to comparing 'b' if 'a' is tied. For example, #main p scores (1,0,1) while .card .title.active scores (0,3,0) — #main p still wins because 1 > 0 for 'a', even though the other selector stacks three classes. If two rules tie exactly, the browser applies whichever rule was defined later in the CSS — which is why source order matters too. !important is the one thing that overrides specificity entirely: a lower-specificity rule with !important beats a higher-specificity rule without it (unless the other rule also has !important, in which case specificity decides again).
When should you actually reach for this tool?
The classic trigger is 'I wrote this CSS rule and nothing changed on screen' — which usually means another rule with higher specificity (or !important) is overriding it. Paste the conflicting HTML+CSS, enter the selector for the element you're debugging, and the tool lists every matching rule with its specificity score and lets the real browser engine tell you which one actually wins — no more guessing which layer of the cascade is winning.
This tool renders inside an isolated iframe with no external fonts, images, or JavaScript execution, and it doesn't support Shadow DOM or dynamically-injected CSS-in-JS styles — paste static HTML/CSS snippets for accurate results.