CSS Specificity Calculator
Developer
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
JWT Decoder
Decode a JSON Web Token to inspect its header, claims, and expiration.
UUID Generator
Generate random version-4 UUIDs in bulk, with copy.
Hash Generator (SHA)
Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text.
URL Encoder / Decoder
Percent-encode text for URLs, or decode encoded URLs back to text.
Base64 Encoder / Decoder
Encode text to Base64 or decode Base64 back to text, instantly.
JSON Formatter & Validator
Format, beautify, minify, and validate JSON right in your browser.