Understanding Specificity

When multiple CSS rules target the same element, specificity determines which rule wins.

What is Specificity?

The text is red because ID selectors have the highest specificity!

The Specificity Hierarchy

From lowest to highest:

1. Element selectors (p, div, span) - lowest
2. Class selectors (.class, [attr], :pseudo) - medium
3. ID selectors (#id) - high
4. Inline styles - highest
5. !important - overrides all

Combining Selectors

More specific selectors win:

Equal Specificity = Last Wins

When specificity is equal, the last rule in the CSS wins.

Class vs Multiple Classes

The !important Override

Use !important sparingly - it makes CSS harder to maintain!

Inheritance vs Specificity

Direct selectors always beat inherited styles, regardless of specificity.

Exercise: Override a Style

Override the ID selector color using a class with !important: