# Work out CSS specificity and which rule wins

> Paste selectors to count their specificity, or paste CSS and an element to see the rule that applies.

Calculate CSS specificity for any selector and see which rule wins for an element, with cascade layers, !important and inline styles. Runs in your browser.

- Tool: [Specificity calculator](https://fixmint.cc/css-specificity-calculator)
- Category: [Web & developer](https://fixmint.cc/developer-tools)
- Fixes: Which CSS rule wins?
- Runs in the browser: files and text stay on the device, no sign-up, free.

## How to work out which CSS rule wins

1. Pick a mode: count selectors, or find the winning rule.
2. Paste the selectors, or the CSS, the HTML and the property.
3. Read the score, or the winner and why each other rule lost.

## Questions

### How is specificity counted?

Each id counts 1,0,0, each class, attribute or pseudo-class 0,1,0, and each element name or pseudo-element 0,0,1. The universal selector and :where() count for nothing.

### How do :is(), :not() and :has() count?

They count as their strongest argument. So :is(#a, .b) p scores 1,0,1, because #a is the strongest part inside :is(). The rule with :where(#a) p scores 0,0,1.

### Why does a layered rule lose to a plain rule?

For normal declarations, rules outside any layer beat rules in layers. For !important the order flips, so an earlier layer wins. A normal style attribute beats every normal stylesheet rule, and an !important style attribute beats every other !important rule.

### Is my CSS sent anywhere?

No. Your browser parses and matches the selectors in this tab, and nothing is sent to a server.

## Related tools

- [Regex tester](https://fixmint.cc/regex-tester): Regex matches the wrong text
- [Accessibility checker](https://fixmint.cc/accessibility-checker): Is this page accessible?
- [Format JSON](https://fixmint.cc/json-formatter): JSON won’t parse
- [Base64 encode and decode](https://fixmint.cc/base64-encode-decode): Read or make a Base64 string