free tools runs in this tab no account, no upload
Selector specificity
Which of these two selectors wins?
The three numbers, compared. It handles the functional pseudo-classes properly, which is where nearly every surprising override comes from: :where() weighs nothing and :is() weighs its heaviest argument.
- #app .card:hover 1, 2, 0
- .card.is-active a[href] 0, 3, 1
- verdict #app .card:hover wins.
how to use it
- Paste the selector that is winning when it should not be.
- Paste the one you expected to win into the second field.
- Read the verdict; the counts underneath say which part of the selector carries the weight.
what this page cannot do
Two selectors you already found. The extension shows every rule that matched the element you point at, in cascade order, with the losers struck through - which is how you find the selector you did not know existed.
Cascade in the panel Which CSS rule is actually winning?
no host permissions · the reading is free