Codectionary / Developer documentation / CSS

Specificity

When multiple CSS rules target the same element with conflicting declarations, specificity determines which one wins. It is calculated as a four-part value: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, compared in that order from most to least significant.

Syntax

(inline, ID, class, type)

Examples

Comparing Specificity

Working through the specificity of several selectors.

/* p                -> (0,0,0,1) - one type selector */
/* .box              -> (0,0,1,0) - one class selector */
/* #header           -> (0,1,0,0) - one ID selector */
/* .box.featured      -> (0,0,2,0) - two class selectors, higher than one class */
/* #header .box       -> (0,1,1,0) - one ID + one class, beats any class-only combination */

.box.featured { color: blue; }  /* (0,0,2,0) wins over .box alone */
.box { color: red; }             /* (0,0,1,0) loses */
  1. The paragraph deliberately matches more than one selector.
  2. For normal declarations in the same origin and layer, the more specific matching rule takes precedence before source order resolves a tie.
  3. Inspect the winning declaration in DevTools, then remove featured to change which selector matches.
HTML used by this example
<section id="header"><p class="box featured">Compare the competing colour declarations on this text.</p></section>

Why !important Should Be a Last Resort

!important overrides normal specificity entirely, which can make future overrides very difficult.

.box { color: red !important; } /* beats the competing normal author declaration here */
#header .box.featured { color: blue; } /* ...even against a highly specific selector like this */
/* Now overriding .box requires ANOTHER !important, escalating a maintenance problem */
  1. The paragraph deliberately matches more than one selector.
  2. For normal declarations in the same origin and layer, the more specific matching rule takes precedence before source order resolves a tie.
  3. The important declaration beats the competing normal declaration here; that does not mean important beats every possible user or browser rule.
HTML used by this example
<section id="header"><p class="box featured">Compare the competing colour declarations on this text.</p></section>

Best practices

  • Keep specificity as flat and low as possible throughout a project - prefer single class selectors over deeply nested or ID-based selectors
  • Avoid ID selectors for styling entirely in most modern projects, since their high specificity makes later overrides difficult
  • Treat !important as a last resort, not a quick fix - it breaks the normal cascade and often leads to an escalating "specificity war"
  • When two rules genuinely conflict, source order settles ties at equal specificity - the rule declared later in the stylesheet wins

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading