Specificity in CSS ek algorithm hai jo decide karta hai ki kaunsa CSS rule kisi element par apply hoga.
Agar do ya zyada CSS rules same element ko target karte hain, to jiska specificity zyada hoga wo “win” karega aur wahi style apply hoga.
Specificity in CSS Examples
Example 1
Result: Text red hoga.
Example 2
Result: Text green hoga, kyunki class selector ki specificity zyada hoti hai.
Example 3
Result: Text blue hoga, kyunki id selector ki specificity sabse zyada hoti hai (inline ke baad).
Example 4
Result: Text pink hoga, kyunki inline style ki specificity sabse highest hoti hai.
Specificity in CSS Hierarchy
| Selector | Example | Description | Weight |
|---|---|---|---|
| Inline styles | <h1 style="color: pink;"> |
Sabse highest priority | Highest |
| ID selectors | #navbar | Second highest | 1-0-0 |
| Class / attribute / pseudo-class | .test, [type=”text”], :hover | Third priority | 0-1-0 |
| Element / pseudo-element | h1, ::before | Low priority | 0-0-1 |
| Universal selector | * | No priority | 0-0-0 |
Understand Weight Notation
Specificity in CSS me weight notation 3 numbers me hota hai (X-Y-Z):
- X → ID selectors ki count
- Y → Class, attribute, pseudo-class ki count
- Z → Element aur pseudo-elements ki count
Left side ka number zyada hoga to wo rule jeetega. Agar equal ho, to next number compare hota hai.
Calculate Specificity Weight
Jiska weight zyada hoga, wahi rule apply hoga.
Example
Result: Text orange hoga, kyunki uska weight sabse zyada hai.
More Specificity in CSS Examples
Equal specificity → latest rule wins
Result: Red apply hoga (latest rule).
ID selector vs attribute selector
Result: Yellow apply hoga (ID wins).
Class vs element selector
Result: Yellow apply hoga (class wins).
Universal selector
Result: Red apply hoga (universal ki koi specificity nahi hoti).
Inline style vs external style
Result: Yellow apply hoga (closer/last rule wins).
Specificity in CSS decide karta hai kaunsa style apply hoga.
Inline > ID > Class > Element > Universal priority follow hoti hai.
