CSS Specificity Calculator
Calculate the specificity of any CSS selector. Compare two selectors, understand which rule wins, and learn the specificity scoring system.
Load a preset into Selector A
Specificity Scoring
ID selectors — (a)
#header, #nav
Class / attr / pseudo-class — (b)
.btn, [type=text], :hover
Type / pseudo-element — (c)
div, p, h1, ::before
Universal selector (*), combinators, and :where() contribute 0 specificity.
How to Use CSS Specificity Calculator
- 1Enter a CSS selector into the input field.
- 2See the specificity score broken down by ID, class, and element.
- 3Optionally enter a second selector to compare which wins.
- 4Understand the cascading rules for your selectors.
ZenovayAnalytics
See who's on your site right now.
- Real-time visitor tracking
- Privacy-first, no cookie banner
- Set up in two minutes
Related Tools
JSON Formatter & Validator
Format, validate, and beautify JSON data with syntax highlighting and error detection.JWT Decoder
Decode and inspect JWT tokens. View header, payload, and verify signatures.Base64 Encode/Decode
Encode text to Base64 or decode Base64 back to text. Supports UTF-8 and binary data.URL Encode/Decode
Encode or decode URL components. Handle special characters, query strings, and full URLs.Frequently Asked Questions
How is CSS specificity calculated?▾
CSS specificity is calculated as a triple (a, b, c): a = number of ID selectors (#id), b = number of class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), c = number of type selectors (div, p) and pseudo-elements (::before). Inline styles have specificity (1,0,0,0) — above all stylesheet rules. !important overrides all specificity. Universal selector (*), combinators (+, >, ~, space), and :is()/:not() do not add specificity.
Which selector wins when there is a conflict?▾
The selector with higher specificity wins. If specificities are equal, the rule that appears later in the stylesheet wins (source order). To compare: (1,0,0) beats (0,9,9) because IDs outweigh any number of classes. The comparison is not arithmetic — it is lexicographic: compare (a) first, then (b), then (c). One ID always beats any number of classes.
What is the specificity of :is(), :not(), and :where()?▾
:is() and :not() take the specificity of their most specific argument: :is(#id, .class) has specificity (1,0,0) because #id is the most specific argument. :where() always has zero specificity regardless of its arguments — useful for utility classes you want to easily override. :not() itself contributes zero but the argument inside contributes normally.
How does !important affect specificity?▾
!important overrides all specificity for the property it applies to. However, it does not change the specificity score. Two declarations with !important are compared by specificity normally. Best practice: avoid !important. If you need to override a third-party stylesheet, try increasing specificity instead. Use !important only for utility classes that should never be overridden, like .visually-hidden or .sr-only.
What is the specificity of inline styles?▾
Inline styles (style="color: red") have the highest specificity of any selector-based rule, written as (1,0,0,0) in the 4-part notation that includes inline. No selector in a stylesheet can override an inline style without !important. This is why CSS frameworks often avoid inline styles — they are too hard to override. Use CSS custom properties or classes instead of inline styles for maintainable code.