Specificity
CSS specificity is the priority assigned to a selector that helps determine which matching declaration takes precedence in the cascade when styles conflict.
CSS in Depth, Second Edition
A numeric representation of a selector's counts of IDs, classes, and tags, ordered from highest to lowest priority.
- How it is used
- Resolves conflicting CSS declarations by comparing selectors when earlier cascade criteria leave the conflict unsettled.
- How deep it goes
- Works through numeric selector counts, competing fixes, source-order ties, and specificity control with `:where()` and nesting.
- Examples
- Uses conflicting navigation-link colors, ranked heading selectors, a link styled as a button, and a nested selector list.
- What you can do after
- Diagnose/debug with it when a CSS rule loses, then adjust selectors or reduce specificity to express the intended priority.
Read how CSS in Depth, Second Edition explains specificity →
React in Depth
CSS specificity is the priority calculation that determines which applicable CSS rule overrides another when their declarations conflict.
- How it is used
- Determines which conflicting CSS declaration overrides another and frames styling decisions in component-based applications.
- How deep it goes
- Defines priority, demonstrates a button override, and stops short of detailing the underlying selector-scoring algorithm.
- Examples
- Uses green and purple button rules, .button and .custom-button, and styled-components rule ordering.
- What you can do after
- Diagnose conflicting rules across CSS files and choose managed ordering when component-scale specificity becomes difficult to maintain.
Tiny CSS Projects
CSS specificity is the precedence score used to determine which competing selector-based declarations apply to an element.
- How it is used
- Resolves competing CSS declarations and supports deliberate overrides in responsive layouts and form controls.
- How deep it goes
- Explains selector scoring, inheritance, stylesheet order, !important, and modern :is() and :where(), without formal browser internals.
- Examples
- Uses inherited body and paragraph colors, table header alignment, inline headings, and styled radio buttons and checkboxes.
- What you can do after
- Diagnose conflicting declarations and apply targeted selector, order, inheritance, or cascade changes.
Web Design Playground, Second Edition
CSS specificity is the ranking assigned to a selector that determines its precedence among competing style rules targeting the same element.
- How it is used
- Resolves conflicts among CSS declarations that target the same element, especially when the declarations share a source.
- How deep it goes
- Explains selector scoring with I-C-T comparisons and worked rules, while leaving the wider cascade as surrounding context.
- Examples
- Uses competing p, class, descendant, and combined selectors to calculate scores and determine a paragraph’s rendered color.
- What you can do after
- Diagnose which competing CSS selector wins by calculating and comparing its specificity.
Read how Web Design Playground, Second Edition explains specificity →
Web Design Playground
The CSS rule-ranking system that compares selectors to decide which declaration wins when multiple rules apply to the same element.
- How it is used
- Resolves same-source CSS rule conflicts by ranking selectors that target the same element.
- How deep it goes
- Teaches a point-based scoring recipe for selector types, inline styles, and !important without further browser internals.
- Examples
- Works through four competing color rules for a paragraph with the colored-text class inside a div.
- What you can do after
- Diagnose/debug with specificity by calculating selector weights to determine why a CSS declaration loses.
Web Components in Action
CSS specificity is the precedence system that determines which competing stylesheet declarations apply to an element.
- How it is used
- Uses specificity to prevent and diagnose CSS style creep around Web Components.
- How deep it goes
- Explains selector scoping, conflicting button rules, inherited variables, and `:root` baselines through working examples.
- Examples
- Uses a styled stepper, global button rules, scoped button overrides, and inherited theme variables.
- What you can do after
- Diagnose style creep by narrowing selectors and tracing inherited custom-property values across component boundaries.
Related concepts
- cascade layercontrasts with · A CSS cascade layer is a named or anonymous group of declarations whose precedence is explicitly ordered within the cascade.
- :where()addressed by · The CSS :where() pseudo-class matches elements against a selector list while contributing zero specificity.
- cascadeused by · The CSS cascade is the process that resolves competing applicable style declarations to determine the styles applied to an element.
- CSSpart of · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- CSS selectoruses · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
- :is()configured by · The CSS :is() pseudo-class matches an element if it matches at least one selector in its argument list and takes the specificity of the most specific argument.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.