CssHow-ToBeginner · 3 min read

How to Calculate Specificity in CSS: Simple Guide

CSS specificity is calculated by counting the number of ID selectors, class/attribute/pseudo-class selectors, and element/pseudo-element selectors in a rule. The specificity is expressed as a four-part value: a,b,c,d, where a is inline styles, b is IDs, c is classes/attributes/pseudo-classes, and d is elements/pseudo-elements.

📐

Syntax

Specificity is calculated as a four-part value: a,b,c,d.

a: Inline styles count (1 if inline style, else 0)
b: Number of ID selectors (#id)
c: Number of class selectors (.class), attribute selectors ([type='text']), and pseudo-classes (:hover)
d: Number of element selectors (div, p) and pseudo-elements (::before)

The higher the value in the leftmost part, the more specific the selector is.

css

/* Specificity format: a,b,c,d */
/* Example selector: div#menu .item:hover::before */
/* a = 0 (no inline style) */
/* b = 1 (#menu) */
/* c = 2 (.item and :hover) */
/* d = 2 (div and ::before) */

💻

Example

This example shows how different selectors have different specificity values and which style wins.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Specificity Example</title>
<style>
  /* Specificity: 0,0,1,0 (one class) */
  .highlight {
    color: blue;
  }

  /* Specificity: 0,1,0,0 (one ID) */
  #special {
    color: red;
  }

  /* Specificity: 0,0,0,1 (one element) */
  p {
    color: green;
  }
</style>
</head>
<body>
  <p id="special" class="highlight">This text will be red because ID selector beats class and element.</p>
</body>
</html>

Output

The paragraph text appears in red color.

⚠️

Common Pitfalls

Many developers expect the last CSS rule to always apply, but specificity can override this. Also, inline styles have the highest specificity, which can cause confusion.

Using too many IDs can make your CSS hard to maintain. Instead, prefer classes for styling.

css

/* Wrong: expecting last rule to apply */
/* Specificity: 0,0,1,0 */
.button {
  background: blue;
}

/* Specificity: 0,1,0,0 - this wins despite being earlier */
#submit {
  background: red;
}

/* Correct: use classes consistently */
.button {
  background: blue;
}

.button.primary {
  background: red;
}

📊

Quick Reference

Selector Type	Example	Specificity Value
Inline style	`style="color:red"`	1,0,0,0
ID selector	`#header`	0,1,0,0
Class selector	`.menu`	0,0,1,0
Attribute selector	`[type='text']`	0,0,1,0
Pseudo-class	`:hover`	0,0,1,0
Element selector	`div`	0,0,0,1
Pseudo-element	`::before`	0,0,0,1

✅

Key Takeaways

Specificity is a four-part value: inline styles, IDs, classes/attributes/pseudo-classes, then elements/pseudo-elements.

Higher specificity overrides lower specificity regardless of order in CSS.

Inline styles have the highest specificity and override all selectors.

Use classes for styling instead of IDs for easier maintenance.

Remember that the last rule only wins if specificity is equal.