Figure out which CSS rule wins

The job

When two rules could style the same element, the browser picks the more specific selector — and a tied score falls to whichever appears later in the source. Specificity is a tuple: (ID count, class-ish count, type count), compared left to right. The calculator turns each selector into that tuple so you can see the winner instead of debugging by toggling styles.

Scoring a selector

Paste selectors — comma-separated or one per line. Each gets an a,b,c score: a counts IDs, b counts classes, attribute selectors, and pseudo-classes, c counts element types and pseudo-elements. Sorted strongest first.

• `.nav .link` → (0,2,0). `#nav .link` → (1,1,0). The ID-containing rule wins even if it comes earlier.
• :is(), :not() and :has() take their strongest argument's score; :where() and * count zero.
• Inline styles and !important sit above selectors entirely — the tool doesn't score them.

Worked example

Your override `.card button { color: red }` isn't beating `.theme .card button { color: blue }`. Scores: (0,1,1) vs (0,2,1). The second rule has one more class, so it wins — you need an equally specific or stronger selector, not just a later line in the file.

Where it stops

It scores selector text, not your stylesheet's cascade — it can't tell which of two equal scores is applied later, because that depends on your file order. Up to 50 selectors per check.