Specificity CSS
- Specificity in CSS is a mechanism that determines which CSS rule is applied by the browser when multiple rules target the same element.
- It's calculated based on the types of selectors used in the rule.
- More specific selectors override less specific ones.
Calculation of Specificity
- Inline styles: Highest specificity (
1000). - ID selectors: (
100). - Class selectors, attributes selectors, and pseudo-classes: (
10). - Element (tag) selectors and pseudo-elements: (
1). - Universal selector (
*) has the lowest specificity (0).
The specificity is represented as a 4-part value:
inline styles > ID selectors > classes/pseudo-classes/attributes > elements/pseudo-elements.