Building a Purple Experience
Experience Styling
CSS Specificity
5min
CSS specificity is a set of rules that determine which styles are applied when multiple rules target the same element. It helps resolve conflicts between competing styles.
Specificity is calculated based on the types of selectors used in a CSS rule. Each type has a weight, and the higher the specificity, the more precedence a rule has.
CSS assigns values based on selector types:
- Inline styles (style="") → Highest specificity
- Example: <div style="color: red;">
- Specificity: 1000
- ID selectors (#id) → High specificity
- Example: #myId { color: blue; }
- Specificity: 100
- Class, Attribute, and Pseudo-class selectors (.class, [attr], :hover) → Medium specificity
- Examples:
- .myClass { color: green; }
- [type="text"] { color: black; }
- :hover { color: orange; }
- Specificity: 10
- Element and Pseudo-element selectors (div, h1, ::before) → Lowest specificity
- Examples:
- p { color: yellow; }
- ::before { content: "Hello"; }
- Specificity: 1
- p { color: blue; } → Specificity 1
- .text { color: red; } → Specificity 10 (class selector is stronger than element selector)
- #main { color: green; } → Specificity 100 (ID is stronger than class)
- style="color: black;" → Specificity 1000 (inline styles override everything else)
- If two selectors have the same specificity, the latest rule in the CSS file wins.
- !important overrides specificity but should be used sparingly.
- Use specificity wisely to avoid unnecessary complexity.
- Prefer classes over IDs for reusability.
- Avoid overusing !important, as it makes debugging difficult.