CSS Specificity: Syntax, Usage, and Examples

CSS specificity determines which styles take precedence when multiple rules target the same element. A higher specificity value overrides lower ones, ensuring consistent styling and preventing unintended conflicts.

How to Use CSS Specificity

CSS calculates specificity using a point system based on the types of selectors in a rule. The general hierarchy follows these principles:

• Inline styles (style="") hold the highest specificity.
• ID selectors (#id) have more specificity than class selectors.
• Class selectors (.class), attributes ([type="text"]), and pseudo-classes (:hover) rank below IDs but above element selectors.
• Element selectors (h1, p, div) and pseudo-elements (::before, ::after) have the lowest specificity.

Specificity Calculation Breakdown

CSS represents specificity as a three-part numerical value (a, b, c), where:

• a: Inline styles (style="") → 1,0,0
• b: ID selectors (#id) → 0,1,0
• c: Class selectors, attributes, pseudo-classes (.class, [attr], :hover) → 0,0,1
• d: Element selectors and pseudo-elements (div, h1, ::before) → 0,0,0,1

Example Specificity Scores

/* 0,0,1 (class selector) */
.button {
  color: blue;
}

/* 0,1,0 (ID selector) - Higher specificity, overrides .button */
#submit {
  color: red;
}

/* 1,0,0 (inline style) - Highest specificity, overrides all */
<button id="submit" class="button" style="color: green;">Submit</button>

Since inline styles hold the highest specificity, the button text appears green.

When to Use CSS Specificity

Resolving Conflicts in Styles

When multiple CSS rules target the same element, specificity determines which rule takes effect.

h1 {
  color: blue; /* (0,0,0,1) */
}

.title {
  color: red; /* (0,0,1,0) */
}

/* The .title class has higher specificity than h1 */
<h1 class="title">Heading</h1>

Because .title has a higher specificity than h1, the heading appears red.

Overriding Framework or External Styles

CSS specificity allows custom styles to override external stylesheets like Bootstrap or Tailwind without using !important.

/* Bootstrap's default button */
.btn {
  background: gray; /* (0,0,1) */
}

/* Custom styles override Bootstrap */
.custom-btn {
  background: black; /* (0,0,1) */
}

When .custom-btn is added alongside .btn, the button’s background changes to black.

Handling Nested Styles in CSS Modules

CSS specificity helps structure and maintain styles in component-based systems like CSS Modules.

.component {
  color: black;
}

.component .title {
  color: blue;
}

Since .title exists inside .component, its styles take precedence within that scope.

Examples of CSS Specificity in Action

Example 1: Class vs. Element Selectors

p {
  color: blue; /* (0,0,0,1) */
}

.text {
  color: red; /* (0,0,1,0) */
}

If the markup includes <p class="text">Hello</p>, the text appears red because .text has a higher specificity than p.

Example 2: ID Selector Overriding Class

.text {
  color: red; /* (0,0,1,0) */
}

#highlight {
  color: green; /* (0,1,0,0) */
}

When <p class="text" id="highlight">Hello</p> appears in the markup, the text turns green since ID selectors override class selectors.

Example 3: Overriding Specificity with !important

Using !important forces a style to apply regardless of specificity.

.text {
  color: red !important; /* Overrides all other rules */
}

#highlight {
  color: green;
}

Even though #highlight has a higher specificity, .text applies red because !important takes priority.

Learn More About CSS Specificity

Using a CSS Specificity Calculator

A CSS specificity calculator breaks down specificity values for complex selectors, helping developers determine which rule applies.

For example, the selector #menu .item a:hover has a specificity score of (0,1,2,1), meaning it contains one ID, two class selectors, and one element selector.

Doubling Class Specificity for Stronger Rules

To increase specificity without using !important, duplicate the class name.

.button.button {
  background: black;
}

This selector (0,0,2,0) has a higher specificity than .button (0,0,1,0), allowing the new style to take precedence.

Calculating CSS Specificity Manually

To manually calculate specificity, assign point values as follows:

• Inline styles (style="color:red") → 1000 points
• IDs (#id) → 100 points
• Classes, attributes, pseudo-classes (.class, [attr], :hover) → 10 points
• Element selectors and pseudo-elements (div, p, ::before) → 1 point

If multiple selectors apply to the same element, the one with the highest specificity wins.

CSS specificity ensures that the correct styles apply when multiple rules target the same element. Understanding specificity helps developers control styles effectively, prevent unnecessary !important declarations, and resolve conflicts efficiently. By mastering specificity calculations, class doubling techniques, and specificity tools, developers can write cleaner and more predictable styles.