CSS Specificity - Understanding Selector Priority

What is CSS Specificity?

Specificity determines which CSS rule is applied when multiple rules target the same element. It's a scoring system that calculates which selector is more "specific" and therefore wins.

Why is Specificity Important?

Understanding specificity helps you:

Predict which styles apply - Know which rule will win
Avoid !important - Write better, more maintainable CSS
Debug conflicts - Understand why styles aren't applying
Write efficient CSS - Use the right selector for the job

Specificity Hierarchy

From lowest to highest specificity:

Universal selector (*) - 0 points
Element selectors (div, p) - 1 point
Class selectors (.class) - 10 points
ID selectors (#id) - 100 points
Inline styles (style="") - 1000 points
!important - Overrides everything

Specificity Calculation

Specificity is calculated as: (inline, IDs, classes, elements)

Examples:

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

/* (0, 0, 1, 0) = 10 */
.text { color: blue; }

/* (0, 1, 0, 0) = 100 */
#header { color: green; }

/* (0, 0, 1, 1) = 11 */
p.text { color: purple; }

/* (0, 1, 1, 0) = 110 */
#header .text { color: orange; }

/* (0, 1, 1, 1) = 111 */
#header p.text { color: yellow; }

Detailed Examples

Example 1: Element vs Class

HTML:

<p class="highlight">Text</p>

CSS:

p { color: red; }           /* Specificity: 1 */
.highlight { color: blue; } /* Specificity: 10 - WINS */

Result: Text is blue (class wins over element).

Example 2: Class vs ID

HTML:

<div id="main" class="container">Content</div>

CSS:

.container { background: red; }  /* Specificity: 10 */
#main { background: blue; }      /* Specificity: 100 - WINS */

Result: Background is blue (ID wins over class).

Example 3: Multiple Classes

HTML:

<button class="btn primary">Click</button>

CSS:

.btn { background: gray; }           /* Specificity: 10 */
.primary { background: blue; }       /* Specificity: 10 */
.btn.primary { background: green; }  /* Specificity: 20 - WINS */

Result: Background is green (two classes beat one class).

Example 4: Descendant Selectors

HTML:

<div id="sidebar">
    <p class="text">Paragraph</p>
</div>

CSS:

p { color: red; }                  /* Specificity: 1 */
.text { color: blue; }             /* Specificity: 10 */
#sidebar p { color: green; }       /* Specificity: 101 - WINS */
#sidebar .text { color: purple; }  /* Specificity: 110 - WINS OVER ALL */

Result: Text is purple.

Example 5: Inline Styles

HTML:

<p id="text" class="highlight" style="color: orange;">Text</p>

CSS:

p { color: red; }                /* Specificity: 1 */
.highlight { color: blue; }      /* Specificity: 10 */
#text { color: green; }          /* Specificity: 100 */
/* Inline style wins - Specificity: 1000 */

Result: Text is orange (inline style wins).

The !important Rule

What it does: Overrides all other declarations, regardless of specificity.

Syntax:

property: value !important;

Example:

p { color: red !important; }     /* WINS */
#text { color: blue; }           /* Loses even with higher specificity */

When to use:

Overriding third-party CSS
Utility classes that should always apply
Quick fixes (not recommended for production)

Why to avoid:

Makes debugging harder
Creates specificity wars
Reduces maintainability

Specificity Calculator

Practice Examples:

/* Calculate specificity: */

/* 1. */ * { }                        /* (0,0,0,0) = 0 */
/* 2. */ p { }                        /* (0,0,0,1) = 1 */
/* 3. */ .class { }                   /* (0,0,1,0) = 10 */
/* 4. */ #id { }                      /* (0,1,0,0) = 100 */
/* 5. */ p.class { }                  /* (0,0,1,1) = 11 */
/* 6. */ div p { }                    /* (0,0,0,2) = 2 */
/* 7. */ .class1 .class2 { }          /* (0,0,2,0) = 20 */
/* 8. */ #id .class p { }             /* (0,1,1,1) = 111 */
/* 9. */ div#id.class p { }           /* (0,1,1,2) = 112 */
/* 10. */ #id1 #id2 { }               /* (0,2,0,0) = 200 */

Common Specificity Conflicts

Conflict 1: Bootstrap Override

Problem:

/* Bootstrap */
.btn-primary { background: blue; }

/* Your CSS - doesn't work */
.custom-btn { background: red; }

Solution:

/* Match or exceed specificity */
.btn-primary.custom-btn { background: red; }

Conflict 2: ID vs Class

Problem:

<div id="sidebar" class="dark-theme">Content</div>

.dark-theme { background: black; }  /* Doesn't work */
#sidebar { background: white; }     /* Wins */

Solution:

/* Increase specificity */
#sidebar.dark-theme { background: black; }

Best Practices

1. Keep Specificity Low

Bad:

#header nav ul li a { }  /* Too specific */

Good:

.nav-link { }  /* Simple and reusable */

2. Use Classes Over IDs

Bad:

#button { }

Good:

.button { }

3. Avoid !important

Bad:

.text { color: red !important; }

Good:

/* Increase specificity instead */
.container .text { color: red; }

4. Use BEM Methodology

/* Block */
.card { }

/* Element */
.card__title { }
.card__content { }

/* Modifier */
.card--featured { }

All have same specificity (10), easy to override.

Specificity Tips

Start with low specificity - Easier to override later
Use classes for styling - IDs for JavaScript
Avoid nesting too deep - Max 3 levels
Use specificity calculator - When debugging
Document overrides - Comment why you increased specificity

Debugging Specificity

Browser DevTools:

Inspect element
Look at "Styles" panel
Crossed-out styles = lower specificity
Order matters when specificity is equal

Example:

.text { color: red; }
.text { color: blue; }  /* WINS - same specificity, comes last */

CSS Specificity - Understanding Selector Priority

On this page