Specificity

A set of rules that determines which CSS styles are applied to an element when multiple conflicting rules target the same element.

Overview

CSS specificity is a weight system that browsers use to determine which CSS property values are most relevant to an element and should be applied. The more specific a selector is, the higher its specificity value and the more likely it is to be applied.

Example

css
/* Specificity: 1 (element) */
p { color: black; }

/* Specificity: 10 (class) */
.text { color: blue; }

/* Specificity: 100 (ID) */
#main { color: red; }

/* Specificity: 1000 (inline) */
<p style="color: green;">Text</p>

Key Points

  • Inline styles have highest specificity (1000)
  • IDs have higher specificity than classes (100 vs 10)
  • Classes have higher specificity than elements (10 vs 1)
  • !important overrides specificity (use sparingly)
  • More specific selectors win conflicts

Learn More