CSS Specificity Calculator: Analyze and Rank CSS Selectors by Specificity Score

The CSS Specificity Calculator computes the specificity value (a, b, c) for any CSS selector and ranks multiple selectors from highest to lowest specificity. In "Frontend Development," "CSS Architecture," and "Design System Maintenance," understanding selector specificity is essential for predicting which styles override others in the cascade. According to the W3C CSS Cascading and Inheritance Level 4 Specification, specificity is the primary mechanism (after origin and importance) that determines which CSS declaration applies when multiple rules target the same element. A 2022 survey by State of CSS found that 41% of frontend developers cite "Specificity Conflicts" as their top CSS debugging challenge. This tool provides instant specificity analysis for any number of selectors.

What is CSS specificity and how is the (a, b, c) score calculated?

CSS specificity is a three-component weight system (a, b, c) that determines the priority of CSS selectors when multiple rules apply to the same element. Component "a" counts the number of ID selectors (#id). Component "b" counts class selectors (.class), attribute selectors ([type="text"]), and pseudo-classes (:hover, :nth-child). Component "c" counts type selectors (div, p, h1) and pseudo-elements (::before, ::after). A selector with specificity (1, 0, 0) always overrides one with (0, 10, 10), because the "a" component (IDs) takes absolute precedence over "b" and "c". The W3C Selectors Level 4 Specification defines this as a "lexicographic" comparison: components are compared left-to-right, and the first difference determines the winner.

Specificity Scoring Examples

Selector	IDs (a)	Classes (b)	Elements (c)	Score
*	0	0	0	0
div	0	0	1	1
.container	0	1	0	10
#header	1	0	0	100
div.container	0	1	1	11
#header .nav li.active	1	2	1	121
#main #content .article p::first-line	2	1	2	212
div > p ~ span.highlight:hover	0	2	3	23

6 Frontend Development Use Cases

• CSS Debugging: When a style rule is unexpectedly overridden, developers paste both selectors into the calculator to determine which has higher specificity. The selector with the higher (a, b, c) score wins.
• Design System Auditing: Design system maintainers analyze all selectors in a component library to ensure specificity stays within acceptable bounds (typically avoiding IDs entirely, keeping specificity at (0, 2, 1) or lower).
• CSS Refactoring: During CSS refactoring, developers compare old selectors against proposed replacements to verify that specificity is preserved or intentionally reduced.
• Interview Preparation: Frontend developer interviews frequently include specificity-related questions. The calculator provides instant verification of mental calculations.
• Code Review: Reviewers paste submitted CSS selectors to verify that new code does not introduce unnecessarily high specificity that creates maintenance burden.
• Teaching CSS Cascade: Instructors demonstrate the cascade resolution order by showing students how selectors with different specificity scores compete for the same element.

How to Use the CSS Specificity Calculator

1. Enter CSS Selectors: Input one CSS selector per line. The tool accepts any valid CSS selector syntax including combinators (>, +, ~), pseudo-classes (:hover, :nth-child()), pseudo-elements (::before), attribute selectors ([data-type]), and ID/class selectors.
2. Execute Analysis: Click "Calculate Specificity." The tool parses each selector and computes the (a, b, c) components using regex-based pattern matching.
3. Review Individual Results: Each selector is displayed with its specificity breakdown (IDs, Classes/Attrs/Pseudo-classes, Elements/Pseudo-elements) and a numeric score for quick comparison.
4. Compare Rankings: If multiple selectors are entered, the tool automatically sorts them from highest to lowest specificity, providing a clear ranking that predicts cascade resolution order.

The :not() Pseudo-Class Exception

The :not() pseudo-class is unique in specificity calculation: the :not() wrapper itself does not contribute to specificity, but the selector inside it does. For example, div:not(.active) has specificity (0, 1, 1)—the div contributes 1 to "c" and the .active inside :not() contributes 1 to "b". The :not() wrapper contributes 0. This behavior is defined in W3C Selectors Level 3, Section 9. Our calculator handles this exception correctly by extracting the inner selector and counting its components while ignoring the :not() wrapper. Similarly, :is() and :where() pseudo-classes have different specificity rules: :is() takes the specificity of its most specific argument, while :where() always has zero specificity.

Specificity vs. !important vs. Inline Styles

Specificity operates within a broader cascade priority system. The complete CSS cascade resolution order (highest to lowest priority) is: (1) User agent !important declarations, (2) Author !important declarations, (3) Author inline styles (style attribute), (4) Author stylesheet rules sorted by specificity, (5) User agent stylesheet rules. Within step 4, specificity determines which rule wins. The !important flag bypasses specificity entirely, which is why the CSS Guidelines by Harry Roberts (cssguidel.es) recommend avoiding !important except for utility classes. Our calculator focuses exclusively on specificity comparison, which is the correct tool for step 4 analysis.

Frequently Asked Questions

Does the universal selector (*) have specificity?

The universal selector (*) has specificity (0, 0, 0). It contributes nothing to the specificity calculation. Combinators (>, +, ~, space) also have zero specificity. Only ID, class, attribute, pseudo-class, type, and pseudo-element selectors contribute to the score.

How does the score number relate to the (a, b, c) notation?

The numeric score is calculated as a×100 + b×10 + c. This is a simplified representation for quick comparison. However, the actual cascade uses lexicographic comparison: (1, 0, 0) always beats (0, 99, 99), even though 100 < 999 numerically. For selectors without extreme component counts, the numeric score provides correct ordering.

Are inline styles included in specificity?

Inline styles have a specificity of (1, 0, 0, 0) in the 4-component model, which is higher than any selector-based specificity. This calculator analyzes stylesheet selectors only, not inline styles.

Does the order of selectors in the stylesheet matter?

When two selectors have equal specificity, the one appearing later in the stylesheet (source order) wins. Specificity only determines priority when selectors have different specificity values. The calculator identifies ties by showing identical scores.

How are attribute selectors counted?

Attribute selectors ([type="text"], [data-id], [href^="https"]) each contribute 1 to the "b" component (same as class selectors). The attribute name and value matching type do not affect the specificity count.