CSS Specificity Calculator
When two CSS rules target the same element, the cascade picks the rule with higher specificity — counted as (ID, class/attr/pseudo-class, type/pseudo-element). This tool parses your selector, weights every part (#id +1·0·0, .class +0·1·0, div +0·0·1), then walks pseudo-classes like :is(), :not(), :has() (highest argument wins) and :where() (always 0). Drop in two selectors to see which one wins the cascade and by how much, so you can stop guessing why a rule isn't applying.
IDs
1
Classes / attrs / pseudo
2
Types / pseudo-el
3
Token breakdown
#navID+(1, 0, 0)ulType+(0, 0, 1)liType+(0, 0, 1).activeClass+(0, 1, 0)aType+(0, 0, 1):hoverPseudo-class+(0, 1, 0)
Compare two selectors
Paste a second selector to see which one wins the cascade.
Selector A
(1, 2, 3)
← A wins
Selector B
(0, 1, 3)
Examples
Inline styles, !important, and source order all beat selector specificity. This tool only computes the (ID, class, type) tuple from the selector itself.
How to use
- Type or paste any CSS selector — the breakdown updates as you type.
- Read the (ID, class, type) numbers — higher tuple wins the cascade.
- Paste a second selector in the compare box to see head-to-head which one wins.
Frequently asked questions
- Why three numbers instead of one?
- Specificity is compared column-by-column from left: one ID always beats any number of classes; one class always beats any number of type selectors. Adding them up like (0,1,0) + (0,0,10) = 20 is the classic wrong intuition the CSSWG warns against.
- How are :is(), :not(), :has() counted?
- They take the specificity of their highest-weight argument. :is(#a, .b) = 1·0·0, :not(.a, .b) = 0·1·0. :where() always contributes 0·0·0 — useful for zero-specificity overrides.
- What about pseudo-elements like ::before?
- Pseudo-elements (::before, ::after, ::first-line) count as type selectors (0·0·1). Legacy single-colon forms (:before, :after) are recognized as pseudo-elements too.
- Does this include inline styles?
- No — inline style is a separate 'a' bucket (1·0·0·0) that this tool doesn't model since you can't write inline styles in a selector. Add !important when you need to override inline styles.
Related tools
CSS Selector Tester
Test a CSS selector against your HTML and see exactly which elements it matches, in your browser.
Invisible / Zero-Width Character Detector
Spot NBSPs, zero-width characters, bidi marks, and tabs in pasted text — then clean them out.
CSS Flexbox Playground
Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.
HTML / CSS / JS Minifier
Strip whitespace and comments from HTML, CSS, or JavaScript — see the size saved and copy the result.
CSS Grid Playground
Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.
CSS to JS Style Object Converter
Convert a CSS declaration block into a React/JS inline style object, in your browser.