diagnostic · one of 29free, 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 itPress ⌘+K on any tab and type cascade.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin 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.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits