ZenovayTools

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

  1. 1Enter a CSS selector into the input field.
  2. 2See the specificity score broken down by ID, class, and element.
  3. 3Optionally enter a second selector to compare which wins.
  4. 4Understand the cascading rules for your selectors.
Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

Related Tools

JSON Formatter & ValidatorFormat, validate, and beautify JSON data with syntax highlighting and error detection.
JWT DecoderDecode and inspect JWT tokens. View header, payload, and verify signatures.
Base64 Encode/DecodeEncode text to Base64 or decode Base64 back to text. Supports UTF-8 and binary data.
URL Encode/DecodeEncode 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.