CSS
π¨ What Is Specificity in CSS?
CSS stands for Cascading Style Sheets, and the word cascading is very important.
Sometimes multiple CSS rules target the same HTML element.
When this happens, the browser must decide: βWhich CSS rule should be applied?β
The system used to determine this priority is called specificity.
𧩠Understanding CSS Specificity
Every CSS selector receives a priority score.
The browser compares these scores and applies the rule with the highest specificity.
Specificity is usually represented as a four-part value:
a b c dπ Specificity Score Breakdown
| Value | Selector Type | Example | Weight |
|---|---|---|---|
| a | Inline styles | style="color:red;" | 1000 |
| b | ID selectors | #menu | 0100 |
| c | Classes, attributes, pseudo-classes | .box, [type], :hover | 0010 |
| d | Elements and pseudo-elements | div, p, ::after | 0001 |
π’ Specificity Examples
| CSS Rule | Specificity | Score |
|---|---|---|
| * {} | 0,0,0,0 | 0000 |
| div {} | 0,0,0,1 | 0001 |
| .box {} | 0,0,1,0 | 0010 |
| div.box {} | 0,0,1,1 | 0011 |
| #menu {} | 0,1,0,0 | 0100 |
| div#menu {} | 0,1,0,1 | 0101 |
| style="color:red;" | 1,0,0,0 | 1000 |
π§ How the Browser Chooses a Rule
When multiple CSS rules target the same element, the browser follows this priority order:
- 1. Inline styles
- 2. ID selectors
- 3. Class, attribute, and pseudo-class selectors
- 4. Element and pseudo-element selectors
The higher specificity wins.
π‘ Example of Specificity
π HTML + CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
p { color: blue; } /* 0001 */
.colored { color: green; } /* 0010 */
#important { color: red; } /* 0100 */
</style>
</head>
<body>
<p id="important"
class="colored"
style="color: orange;">
Hello CSS!
</p>
</body>
</html>
π What Happens Here?
The same <p> element receives four different color rules.
π Specificity Calculation
| Rule | Specificity |
|---|---|
| p { color: blue; } | 0001 |
| .colored { color: green; } | 0010 |
| #important { color: red; } | 0100 |
| style="color: orange;" | 1000 |
β The inline style has the highest specificity (1000), so the text becomes orange.
π Specificity Priority Table
| Priority | Selector Type | Score |
|---|---|---|
| π₯ Highest | Inline styles | 1000 |
| High | ID selectors | 0100 |
| Medium | Classes, attributes, pseudo-classes | 0010 |
| Low | Elements and pseudo-elements | 0001 |
β οΈ Important Notes
1. If Specificity Is Equal
If two selectors have the same specificity value, the browser applies: The rule written later in the CSS file.
π Example:
p {
color: blue;
}
p {
color: red;
}
β Result: The text becomes red because the second rule comes later.
2. Using !important
The !important keyword forces a CSS rule to override others.
π Example:
p {
color: blue !important;
}
β οΈ This rule can override many other styles, even selectors with higher specificity.
π¨ Why You Should Avoid Overusing !important
Using !important too often can make CSS difficult to maintain and debug.
It should only be used when absolutely necessary.
π§ Quick Summary
- Specificity determines which CSS rule is applied
- Inline styles have the highest normal priority
- ID selectors are stronger than classes
- Classes are stronger than element selectors
- If specificity is equal, the last rule wins
- !important overrides normal specificity rules