diagnostic · one of 36 free, no counter
Cascade
Which CSS rule is actually winning?
A style that "does not apply" almost always applies and is then beaten. The browser shows you the winner with the losers struck through, one element at a time, which answers what happened but not how often it happens. This reads the cascade across the page and ranks where it is doing the most work.
Reach it Press ⌘ + K on any tab and type cascade. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
which rule won, and how much of the win was !importantWhen a change has no visible effect and the element looks right in the inspector, and before a refactor that will move selectors around - a sheet with a lot of !important breaks differently from one without it, and it is worth knowing which you have.
What beats what
in the order the browser applies it- origin and layer
- user agent, then author layers in declaration order, then unlayered author styles
- !important
- inverts the origin order entirely - an important user-agent rule beats everything you write
- inline style
- a specificity nothing in a stylesheet can reach without !important
- specificity
- ids, then classes and attributes and pseudo-classes, then elements
- source order
- the last one wins, and this is the only tie-break left
Asked about this diagnostic
3 of themHow is this different from the Styles pane in DevTools?
That pane answers for one element after you have found it. This tints the whole page by how contested it is, so you find the component that needs looking at before you know which element to click.
Does it understand cascade layers?
Yes, and layers change the answer more than specificity does - a low-specificity rule in a later layer beats a high-specificity rule in an earlier one, which is exactly the case that looks like a browser bug.
Why does it show rules that did not apply?
Because that is the question being asked. "Which rule wins" is already answered by the page in front of you; what you came for is why the one you wrote is not it.
how to use cascade
- Open Cascade. The heatmap tints the whole page by how contested each element's styling is.
- Go to the hottest region first: that is where the cascade is working, not where you were looking.
- Click an element to read its matched rules, ordered by specificity and then by source order.
-
Read the flags for
!importantand inline styles - those are the wins a stylesheet cannot take back.
70 of these · no host permissions · three free audits