CSS Specificity

The specificity is calculated based on four categories, often represented in the form (a, b, c, d):

1. a (Inline styles): The count of style attributes directly in an HTML element.
2. b (IDs): The count of ID selectors.
3. c (Classes, Attributes, Pseudo-classes): The count of class selectors, attribute selectors, and pseudo-classes.
4. d (Types and Pseudo-elements): The count of type selectors (like div, h1) and pseudo-elements (like ::before, ::after).

• Combinators (like >, +, ~, (space)) are not counted in specificity.
• Multiple instances: Each ID, class, attribute, type, and pseudo-element is counted. For example, #nav .item a:hover has a specificity of 0,1,2,1.
• The !important rule overrides any style, regardless of its specificity, but its use is generally discouraged except in specific situations.