Specificity

Specificity is computed as a four-column vector: (inline, ID, class, type). The browser compares columns left-to-right; the first higher value wins.

• Inline styles (style="" attribute): 1,0,0,0
• ID selectors (#header): 0,1,0,0
• Class, attribute, pseudo-class selectors (.nav, [type], :hover): 0,0,1,0
• Type and pseudo-element selectors (div, ::before): 0,0,0,1
• Universal selector (*), combinators (+, >), and :where(): 0,0,0,0

A selector like #content .post a:hover yields (0,1,2,1).

The !important annotation bypasses the normal cascade entirely, creating a separate, higher-priority cascade layer.

• Author !important overrides all normal author declarations
• User !important overrides author !important
• Browser !important (user-agent stylesheet) sits at the top
• Transition declarations override even !important during active transitions

Overuse of !important creates specificity wars that make stylesheets unmaintainable. It should be reserved for user style overrides and utility classes that must guarantee application.

Introduced in CSS Cascade Layers (@layer), this mechanism allows authors to control specificity at an architectural level. Later-declared layers override earlier layers regardless of selector specificity.

• Declarations outside any layer have the highest normal priority
• Within a layer, normal specificity rules still apply
• !important within layers reverses the order: earlier layers' !important beats later layers'
• Unlayered styles beat layered styles in the normal cascade

This allows frameworks to ship low-specificity defaults that authors can easily override without specificity hacks.

Two modern pseudo-classes allow authors to write selectors without inflating specificity:

• :where(): Always contributes 0,0,0,0 to specificity. Ideal for base styles that should be easily overridden. Example: :where(.theme-dark) a has specificity (0,0,0,1).
• :is() and :not(): Take the specificity of their most specific argument. :is(#id, .class) contributes (0,1,0,0).
• :has(): Also adopts the specificity of its most specific argument, making it a powerful but potentially high-specificity relational selector.

These tools enable expressive selectors without the traditional specificity tax.

Specificity governs visual rendering, not DOM structure or semantic meaning. AI parsers and accessibility bots operate on the accessibility tree and DOM, which are unaffected by CSS specificity.

• A visually hidden element via display: none remains in the DOM and accessible to crawlers
• CSS content property (pseudo-elements) is not part of the DOM and is ignored by most AI parsers
• Semantic HTML elements retain their programmatic role regardless of how they are styled
• Overly specific selectors can indicate fragile, tightly coupled CSS architecture that complicates content management at scale

For GEO, focus on semantic markup and structured data; specificity is a presentation-layer concern.

Modern browser DevTools display computed specificity directly in the Styles panel. Hovering a selector reveals its weight in the (0,0,0) notation.

• Chrome/Edge: Shows specificity as [0,1,2,1] in the tooltip
• Firefox: Displays specificity inline with each rule
• Safari: Provides specificity information in the Web Inspector

Common debugging scenarios:

• A rule not applying despite correct syntax: check if a higher-specificity selector is overriding it
• Inline styles blocking stylesheet changes: refactor to avoid inline declarations
• Third-party CSS conflicts: use cascade layers or :where() to isolate component styles