LLM Best Practices

Specificity

2 min read

View markdown source

Definition

Specificity is the numeric weight assigned to a CSS selector; when two rules declare the same property on the same element, the rule with the higher specificity wins. The weight is expressed as three columns: (A, B, C). A counts ID selectors (#nav). B counts class selectors, attribute selectors, and pseudo-classes (.active, [type="text"], :hover). C counts type selectors and pseudo-elements (p, ::before). The universal selector *, combinators, and the :where() pseudo-class contribute zero specificity. Inline styles are treated as a fourth column (1, 0, 0, 0) and always beat external or <style> rules. !important overrides specificity entirely, but two !important declarations fall back to specificity to resolve conflict.

Numerical comparison: (0, 1, 0) beats (0, 0, 10) because columns are compared left to right, not summed.

When it applies

Apply specificity thinking whenever a rule fails to override another. Before reaching for !important, reduce the winning selector or raise the losing one. Prefer custom properties and utility classes (low specificity) over deeply nested selectors. Use :is() for grouping selectors without inflating specificity, or :where() to group at zero cost.

Example

/* Specificity (0, 1, 0) */
.card { color: blue; }
 
/* Specificity (0, 1, 1) -- wins because B+C > B */
.card p { color: red; }
 
/* Specificity (1, 0, 0) -- wins over both because A > 0 */
#sidebar { color: green; }

A button styled by a component library rule .btn-primary (specificity (0,1,0)) will be overridden by a page-level .nav .btn-primary rule (specificity (0,2,0)) even though the intent was to use the component default. Lower the library selector or reset it with :where(.btn-primary).

  • cascade - specificity is one input to the cascade; source order and origin are others.
  • custom-property - custom properties inherit through the cascade, not specificity.
  • has-selector - the :has() pseudo-class has specificity equal to its argument.
  • css - the authoritative deep-dive on CSS rules.
  • css-selectors - quick lookup for selector syntax and specificity weights.

Citing this term

See Specificity (llmbestpractices.com/glossary/specificity).

Graph View

Backlinks