What is CSS Specificity?

CSS specificity is a ranking system browsers use to determine which rule wins when multiple rules target the same element.

Specificity Calculation

Each CSS selector has a specificity score made of four parts, often described as: (A, B, C, D)


Breakdown:

Type	Description	Example	Value (A, B, C, D)
Inline styles	style="..." directly in HTML	<h1 style="color:red">	(1,0,0,0)
ID selectors	#id	#header	(0,1,0,0)
Class, attribute, pseudo-class	.class, [type], :hover, etc.	.nav, [href], :focus	(0,0,1,0)
Element and pseudo-elements	div, p, ::before, etc.	h1, ::after	(0,0,0,1)
Universal selector	*	*	(0,0,0,0)
Combinators	>, +, ~, (descendant)	ul > li, a + p	Do not contribute

Examples:

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

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

/* Specificity: (0, 1, 0, 0) */
#intro {
  color: red;
}

/* Specificity: (0, 0, 2, 1) */
ul li.active:hover {
  color: orange;
}

Rule with higher specificity overrides others if both apply.

Inline vs Internal vs External CSS

CSS can be placed in three ways, which impacts cascading order:

1. Inline CSS – Highest Priority

<p style="color:red;">Hello</p> <!-- Wins unless !important is used -->

2. Internal CSS (in <style> tag)

<style>
  p {
    color: blue;
  }
</style>

3. External CSS

<link rel="stylesheet" href="styles.css" />

What About !important?

p {
  color: green !important;
}

• Overrides all except other !important with higher specificity.
• Avoid overuse – makes debugging harder.

CSS Rule Conflicts in Nesting/Hierarchy

Let’s look at different selectors inside one another (cascading and specificity effects):

Example 1: Nesting and Specificity

/* Specificity: (0,0,1,1) */
.article p {
  color: black;
}

/* Specificity: (0,0,1,2) */
.article p span {
  color: red;
}

Example 2: Class inside ID

/* Specificity: (0,1,1,0) */
#container .button {
  background: green;
}

Example 3: Multiple Classes

/* Specificity: (0,0,3,0) */
.btn.primary.large {
  padding: 10px;
}

Key Rules of Specificity

1. More specific rule wins.
2. If equal specificity, the one that comes later in CSS wins.
3. !important overrides all unless both use !important—then specificity decides.
4. Inline styles override IDs, classes, and element selectors unless they’re !important.

Practice Exercise

Try to guess what color the text will be:

<p id="highlight" class="note" style="color: green;">Hello</p>

p { color: red; }                      /* (0,0,0,1) */
.note { color: blue; }                /* (0,0,1,0) */
#highlight { color: orange; }         /* (0,1,0,0) */

Answer: green — because inline styles override all (specificity: (1,0,0,0))

📚 Summary Table

Rule Type	Specificity	Priority
Inline styles	(1,0,0,0)	Highest (unless another !important rule with higher specificity exists)
ID selectors	(0,1,0,0)	Very high
Class/Attribute	(0,0,1,0)	Medium
Element	(0,0,0,1)	Low
Universal *	(0,0,0,0)	Lowest
!important	Overrides everything unless same specificity