What is CSS specificity and how are conflicting rules resolved?
Asked on Aug 22, 2025
Answer
CSS specificity determines which styles are applied when multiple rules target the same element. It is calculated based on the types of selectors used, and conflicts are resolved by applying the rule with the highest specificity.
Example Concept: CSS specificity is calculated using a point system based on the selectors in a rule. Inline styles have the highest specificity, followed by IDs, then classes, attributes, and pseudo-classes, and finally element selectors. When rules conflict, the one with the highest specificity is applied. If specificity is the same, the last rule in the CSS is used.
Additional Comment:
- Specificity is calculated as a four-part value (a, b, c, d), where 'a' is for inline styles, 'b' is for IDs, 'c' is for classes/attributes/pseudo-classes, and 'd' is for element/pseudo-element selectors.
- For example, an ID selector (#example) has higher specificity than a class selector (.example).
- Use specificity wisely to avoid overly complex CSS and ensure maintainability.
- Consider using CSS variables or utility classes to reduce specificity issues.
Recommended Links: