Mastering Specificity and Specificity Calculation
Learn specificity and its calculation to control style application in CSS.
In this lesson, we’ll explore CSS specificity and how to calculate it. Specificity determines which CSS rules apply when multiple selectors target the same element. Understanding specificity helps us write CSS that behaves predictably and avoids unintended style overrides.
Understanding specificity
Specificity is a scoring system used by browsers to determine which CSS rule to apply when there are conflicting declarations. It is calculated based on the components of the selector.
Calculating specificity
Specificity is expressed as a four-part value (a, b, c, d) from highest to lowest:
a: Inline styles
b: Number of ID selectors
c: Number of class selectors, attributes, pseudo-classes
d: Number of element selectors, pseudo-elements
Consider the following specificity calculations for different CSS selectors.
