Question 1

How is CSS specificity calculated?

Accepted Answer

Three groups counted independently and concatenated as a tuple: A = number of ID selectors (#id), B = number of classes (.cls), attribute selectors ([attr]), and pseudo-classes (:hover), C = number of element selectors (div) and pseudo-elements (::before). Universal selector (*) and combinators (>, +, ~) count nothing. Higher A wins; if A is tied, higher B wins; then C. (1,0,0) beats (0,99,99).

Question 2

What's the specificity of `:is()`, `:not()`, and `:has()`?

Accepted Answer

They take the specificity of their most specific argument. `:is(.foo, #bar)` has specificity (1,0,0), the ID wins. `:not(.foo)` has specificity (0,1,0). The pseudo-class itself adds nothing; only its argument matters. This is a 2022 change, older browsers and the legacy spec counted `:not()` itself.

Question 3

What does `:where()` do differently?

Accepted Answer

Same matching as `:is()`, but specificity is ALWAYS zero. `:where(#main, .header, a)` has specificity (0,0,0). This makes it the right tool for default styles in design systems: you want the selector to match, but you want any user override to win without an !important war.

Question 4

How does !important fit in?

Accepted Answer

It's a sledgehammer on top of specificity. Among declarations of the same importance level (normal or !important), specificity decides. !important declarations beat normal ones regardless of specificity. Two !important declarations are compared by specificity normally. Author !important is beaten by user !important is beaten by user-agent !important, the precedence inverts at the !important level.

Question 5

How do @layer (cascade layers) change things?

Accepted Answer

@layer creates explicit precedence bands. A declaration in a later-defined layer beats one in an earlier layer regardless of specificity, `@layer base, components, utilities` means a (0,1,0) selector in 'utilities' beats a (1,0,0) selector in 'base'. Within a single layer, normal specificity rules apply. Unlayered styles beat layered ones (except for !important, which inverts everything).

Question 6

Why is inline style 'higher specificity' than any selector?

Accepted Answer

Inline styles aren't selectors at all, they're declarations attached directly to the element. They sit one level above selectors in the cascade: any inline declaration beats any selector-matched declaration of the same importance. Conceptually you can think of them as (1,0,0,0), one tier above ID, but the spec treats them as a separate origin.

Question 7

How do I beat a (1,0,0) selector without using !important?

Accepted Answer

Match it with another (1,0,0) declared later, or beat it with a (1,1,0), add a class to the ID selector (#main.large) or duplicate the ID (#main#main, valid CSS). Doubling the selector is an ugly hack; the right fix is usually to rename the ID to a class. The cascade rewards code that doesn't depend on ID selectors.

Question 8

What standards does CSS Specificity Calculator validate against?

Accepted Answer

CSS Specificity Calculator checks compliance with CSS Cascading and Inheritance Level 5.

Question 9

What are the limitations of CSS Specificity Calculator?

Accepted Answer

Does not handle @layer or @container specificity rules Does not account for shadow DOM style scoping

Tier	Target Selectors	Weight Tuple	Hierarchy
IDs	`#header`, `#nav`	(1, 0, 0)	Highest
Classes	`.btn`, `[type]`, `:hover`	(0, 1, 0)	Medium
Elements	`div`, `p`, `::before`	(0, 0, 1)	Lowest
Global	`*`, `:where()`, `>`	(0, 0, 0)	No Weight

CSS Specificity Calculator

Learn More

CSS Bridge: Refining AI-Generated UI for Production Performance

CSS Color Formats in 2026: HEX, RGB, HSL, and OKLCH Explained

CSS Container Queries: Responsive Design Beyond the Viewport

What is CSS Specificity Calculator?

Frequently Asked Questions

Technical Deep Dive

CSS Specificity Calculator

Pixel-Precise Output

Live Visual Preview

Copy-Paste Ready

01 Specificity Weight Matrix

02 Cascade Calculation Pipeline

Runs 100% in your browser

You Might Also Need

Color Accessibility Palette Checker

ARIA Roles & Attributes Reference

Aspect Ratio Calculator

CSS Border Radius Generator