What is specificity?
When two CSS rules target the same element, the browser uses specificity to decide which wins. Specificity is scored in three groups — IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements — written as a-b-c. A higher group always beats a lower one, regardless of order.
How it's counted
- a — number of ID selectors (
#id). - b — classes (
.class), attributes ([type]), pseudo-classes (:hover). - c — element types (
div) and pseudo-elements (::before).
Example
#nav ul li a.active has one ID, one class, and three elements → specificity 1-1-3. Inline styles beat everything, and !important overrides specificity entirely (use it sparingly).
Tips
- Keep specificity low and consistent so styles are easy to override.
- Prefer classes over IDs for styling to avoid specificity wars.