Specificity Calculation: Inline Style ID Class Element
Calculate specificity scores and predict which rule wins any style conflict.
What is Specificity?
Specificity determines which CSS rule wins when multiple rules target the same element and property. It is calculated as a 4-part score: (A, B, C, D) where A is the highest and D the lowest.
Specificity Components
The four columns:
- A: Inline styles (style="" attribute) = 1,0,0,0
- B: ID selectors (#id) = 0,1,0,0
- C: Class selectors (.class), attribute selectors, pseudo-classes = 0,0,1,0
- D: Type (element) selectors, pseudo-elements = 0,0,0,1
All lessons in this course
- Specificity Calculation: Inline Style ID Class Element
- The Cascade: Origin and Order
- !important: When and Why Not
- Inheritance and the all Property