Specificity

Definition

The algorithm used by browsers to determine which CSS property value is the most relevant to an element and therefore applied when multiple conflicting rules exist.

Explain Like I'm New

The CSS Point System. If you tell an element to be Red, but another rule tells it to be Blue, who wins? The browser calculates points. IDs are worth 100 points. Classes are worth 10 points. Elements are worth 1 point. The rule with the highest score wins the fight.

Real World Example

You write `.btn { color: red; }` but the button stays blue. You inspect it and realize a third-party library wrote `#main-form .btn { color: blue; }`. Because they used an ID (100 pts), their rule overpowered yours (10 pts).

Common Use Cases

•Debugging 'Why isn't my CSS working?!'
•Writing maintainable code

Interactive Example

Interview Questions

basic

Which has higher specificity: a Class (`.card`) or an ID (`#header`)?

intermediate

What is `!important` and why should you avoid it?

Flash Cards

Question

Class vs ID?

Click to reveal answer

Answer

An ID. An ID is worth 100 points, a Class is only worth 10.

Question

What is !important?

Click to reveal answer

Answer

`!important` overrides the entire point system. It guarantees victory. It is considered an absolute last resort, because if someone else needs to override YOUR rule later, they also have to use `!important`, leading to a chaotic, unmaintainable codebase.