CSS Specificity "important" or "specific"

how browsers decide which CSS rules to apply

What is CSS Specificity?

Imagine you're playing a game with your friends, and everyone is telling you what to do at the same time. Your mom says Clean your room!", your dad says "Do your homework!", and your friend says "Let's play video games!".

Who would you listen to? Probably your parents, right? That's because they have more authority.

CSS specificity works the same way! When multiple CSS rules try to style the same element, the browser looks at how "important" or "specific" each rule is and picks the strongest one.

The Specificity Ranking (from strongest to weakest):

  1. Inline styles (styles written right on the HTML tag) - Like your mom standing right next to you
  2. ID selectors (like #header) - Like your dad calling from another room
  3. Class selectors (like .button) - Like your older sibling giving advice
  4. Element selectors (like div, p) - Like your friend suggesting what to do

How to Calculate Specificity

Think of specificity like a points game. Different selectors get different points:

1000
Inline Styles
100
ID Selectors
10
Class Selectors
1
Element Selectors

When you have a CSS selector, you add up all the points to see how strong it is.

Examples:

#header→100 points(1 ID = 100)
.button.primary→20 points(2 classes = 10+10)
div ul li→3 points(3 elements = 1+1+1)
#nav .item a→111 points(1 ID + 1 class + 1 element = 100+10+1)

Let's Play a Game!

Which selector would win in these examples?

Example 1:

#main .contentvsdiv.sidebar

Example 2:

.menu li avs.menu .active

Example 3:

h1.titlevs#page-title

Real World Example

Let's see what happens when multiple rules target the same element:

<div id="main" class="content">
<p class="text highlight">Hello World</p>
</div>
/* Which color will the paragraph be? */
#main p { color: red; } /* 100 + 1 = 101 */
.content .text { color: blue; } /* 10 + 10 = 20 */
p.highlight { color: green; } /* 1 + 10 = 11 */
p { color: black; } /* 1 */

Result: The paragraph will be red! "Hello World"

The selector #main p has the highest specificity (101 points), so it wins over the other rules.

The !important Rule - The Superpower

Sometimes, you might add !important to a CSS rule. This is like giving that rule a superpower!

When you use !important, it makes that rule the strongest of all, no matter how many points other rules have.

Warning: Using too many !important rules is like everyone shouting with superpowers - it becomes a big mess! Try to use it only when really needed.

Let's See Some Examples

Example Code

/* Specificity examples */
#header .nav-item a:hover {  /* Specificity: 0,1,2,1 */
  color: blue;
}

div#main ul li a.active {    /* Specificity: 0,1,1,4 */
  color: red;
}

.button.primary {            /* Specificity: 0,0,2,0 */
  background: green;
}

a {                         /* Specificity: 0,0,0,1 */
  text-decoration: none;
}

Tips for Writing Good CSS

Do's

  • Use classes for most styling - they're like good friends that give helpful advice
  • Keep specificity low when possible - don't make things more complicated than needed
  • Organize your CSS so it's easy to read and understand

Don'ts

  • Don't use !important unless you really need to - it's like shouting
  • Avoid using too many IDs for styling - they're too bossy
  • Don't use inline styles in your HTML - it's messy and hard to change later

Let's Practice!

Try to guess which color each paragraph will be, then click "Try It" to see if you're right!

p { color: black; }
.text { color: blue; }
#unique { color: green; }
p#unique.text { color: purple; }
.important { color: orange !important; }
< Previous (Cascade & Inheritance)Next (Values & Units) >