1
HTML/CSSBeginner#css#box-model
HTML/CSSIntermediate#css#specificity
What is CSS specificity and how is it calculated?
Specificity determines which rule wins when multiple selectors match the same element. It's calculated as a tuple (inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) — higher categories always outrank lower ones regardless of count.
Example
/* specificity (0,1,0,0) */
#nav { color: red; }
/* specificity (0,0,2,0) - loses to #nav */
.menu.active { color: blue; }
/* inline style always wins over both */
<div style="color: green;">