Mastering Specificity and Specificity Calculation

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.