CSS Specificity Calculator

Calculate and compare CSS selector specificity. Enter selectors below to see their (id, class, element) breakdown instantly.

ID Class Pseudo-class Attribute Pseudo-element Element Combinator

Class

Elem

= (1,2,0)

#nav·.menu-item:hover

Class

Elem

= (0,1,2)

div.container·>p

Quick Examples

Comparison

Rank	Selector	ID (a)	Class (b)	Elem (c)	Score
1	#nav .menu-item:hover	1	2	0	(1,2,0)
2	div.container > p	0	1	2	(0,1,2)

About CSS Specificity Calculator

CSS Specificity determines which style rule wins when multiple rules target the same element. Understanding specificity is essential for writing maintainable CSS and debugging cascade issues. This calculator parses any valid CSS selector and shows its exact specificity value broken down into three components.

How CSS Specificity Works

Specificity is represented as three numbers (a, b, c):

a — ID selectors: Each #id adds 1 to a. Highest weight.
b — Class / Attribute / Pseudo-class: Each .class, [attr], or :hover adds 1 to b.
c — Type selectors / Pseudo-elements: Each element name (div, p) or ::before adds 1 to c.

To compare selectors, start from a. If tied, compare b. If still tied, compare c. The universal selector * and combinators (>, +, ~) contribute zero specificity.

How to Use This Tool

Type any CSS selector in the input field — specificity updates instantly.
Click Add Selector to compare multiple selectors side by side.
Use the Quick Examples to see common patterns.
The comparison table sorts selectors from highest to lowest specificity.

Special Pseudo-classes

:where() — always contributes 0 specificity, regardless of its arguments.
:not(), :is(), :has() — contribute the specificity of their most specific argument.
:nth-child(), :nth-of-type() — count as a single pseudo-class (0,1,0).

Common Use Cases

Debugging why a CSS rule is being overridden unexpectedly.
Comparing competing rules to understand cascade order.
Learning CSS specificity in an interactive way.
Code reviewing stylesheets for over-specific selectors.
Refactoring CSS to reduce specificity wars.

Frequently Asked Questions

Does inline style count in this calculator?: No. Inline styles have the highest specificity (above any selector) but are not part of selector syntax, so they're not calculated here.
What about !important?: !important overrides all specificity calculations entirely. It is not a specificity value but a cascade mechanism — avoid it in favour of better selector architecture.
Does selector order matter when specificity is equal?: Yes. When two selectors have identical specificity, the one that appears later in the stylesheet wins (source order).
Is the universal selector (*) always zero?: Yes. * contributes (0,0,0) and has no effect on specificity calculations.
How do combinators affect specificity?: Combinators (>, +, ~, space) have no specificity themselves. Only the individual simple selectors on each side contribute.