How specificity determines which style applies in css

CssHow-ToBeginner · 3 min read

How CSS Specificity Determines Which Style Applies

CSS uses specificity to decide which style rule applies when multiple rules target the same element. The rule with the highest specificity wins, based on a point system counting inline styles, IDs, classes, and element selectors.

📐

Syntax

Specificity is calculated by counting different types of selectors in a CSS rule:

Inline styles add the highest points.
ID selectors add more points than classes.
Class, attribute, and pseudo-class selectors add moderate points.
Element and pseudo-element selectors add the least points.

The specificity is written as four numbers: a,b,c,d, where:

a = inline styles (1 or 0)
b = number of ID selectors
c = number of class, attribute, and pseudo-class selectors
d = number of element and pseudo-element selectors

css

/* Specificity format: a,b,c,d */
/* Example selectors and their specificity values */
#menu { /* 0,1,0,0 */ }
.menu-item { /* 0,0,1,0 */ }
div { /* 0,0,0,1 */ }
[disabled] { /* 0,0,1,0 */ }
button:hover { /* 0,0,1,1 */ }
/* Inline style example: style="color:red;" has specificity 1,0,0,0 */

💻

Example

This example shows three CSS rules targeting the same <p> element. The rule with the highest specificity applies the color red.

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>
  p { color: blue; } /* specificity 0,0,0,1 */
  .highlight { color: green; } /* specificity 0,0,1,0 */
  #special { color: red; } /* specificity 0,1,0,0 */
</style>
</head>
<body>
  <p id="special" class="highlight">This text will be red because ID selector has highest specificity.</p>
</body>
</html>

Output

A paragraph with red text reading: "This text will be red because ID selector has highest specificity."

⚠️

Common Pitfalls

Many beginners expect the last CSS rule to apply, but specificity overrides order unless specificity is equal. Inline styles override all selectors except !important. Using !important forces a style to apply regardless of specificity, but it should be avoided for maintainability.

css

/* Wrong: expecting last rule to apply */
p { color: blue; }
p { color: green; } /* This applies because specificity is equal and this is last */

/* But with different specificity: */
p { color: blue; }
.highlight { color: green; }
/* <p class="highlight">Text</p> - green applies because class selector is more specific */

/* Inline style overrides all: */
/* <p style="color: red;" class="highlight">Text</p> - red applies */

📊

Quick Reference

Selector Type	Specificity Points (a,b,c,d)
Inline style	1,0,0,0
ID selector (#id)	0,1,0,0
Class selector (.class), attribute selector ([type]), pseudo-class (:hover)	0,0,1,0
Element selector (div, p), pseudo-element (::before)	0,0,0,1

✅

Key Takeaways

CSS specificity decides which style applies by assigning points to selectors.

ID selectors are stronger than class selectors, which are stronger than element selectors.

Inline styles have the highest specificity except when overridden by !important.

When specificity is equal, the last declared rule applies.

Avoid using !important as it breaks normal specificity rules and makes maintenance harder.