Selector specificity

Which of these two selectors wins?

The three numbers, compared, with the functional pseudo-classes handled properly: :where() weighs nothing and :is() weighs its heaviest argument.

selector against

1, 2, 0 Against 0, 3, 1. Ids, then classes and attributes, then types.

ready to paste

#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.

written about at length

css 4 min Which CSS rule wins, and why it is not the specific one Specificity is the fourth thing the cascade checks, not the first. The order it actually runs in, and why an unlayered rule beats a layered one every time.

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?

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

no host permissions · the reading is free