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.
- Runs on your device
- No sign-up
- Works offline after a visit
Browser default styles and other stylesheets are not included. Nothing is sent anywhere.
| Selector | Specificity | Weight | Context |
|---|
| Rule | Value | Specificity | Layer | Result |
|---|
How to work out which CSS rule wins
- Pick a mode: count selectors, or find the winning rule.
- Paste the selectors, or the CSS, the HTML and the property.
- 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.
Reviews
No reviews yet. Be the first.