Specificity Calculation

CSS specificity is an algorithm that browsers use to determine which CSS declarations apply to an element when multiple, conflicting rules exist. Specificity is just one part of the cascade, but it is often the deciding factor in styling conflicts

The specificity is calculated as a three-column value: (IDs, Classes, Elements).

calculating specificity:

To calculate a selector's specificity, you add points based on the types of selectors it contains. The higher the score, the more specific the selector

Specificity components

• Inline styles: A style attribute applied directly to an element. These have the highest specificity and override any author styles in external stylesheets

Value: (1,0,0,0) (a separate column with the highest precedence)

• ID selectors: Any #id selector

Value: Add 1 to the ID column. Example: #header is (1,0,0)

• Class, attribute, and pseudo-class selectors: This includes .class, [type="text"], and :hover

Value: Add 1 to the Class column for each selector. Example: .nav.active is (0,2,0)

• Element and pseudo-element selectors: This includes div, p, ::before, and ::after

Value: Add 1 to the Element column for each selector. Example: p::first-line is (0,0,2)

• The universal selector (*): Has no specificity and contributes nothing to the score

Value: (0,0,0)