Understanding CSS Selector Specificity: Which Rule Wins?

Consider the following HTML snippet:

<div id="content">
  <p id="title">Hello world</p>
</div>

and two CSS rules that both set the color of the p element:

#title { color: red; }

#content p { color: blue; }

Only one rule will be applied, and the decision depends on CSS selector specificity.

CSS assigns each selector a four‑part numeric value (a.b.c.d) where a is the highest weight. The larger the number, the higher the priority. The four levels are:

Inline style (style attribute): 1,0,0,0

ID selector (#id): 0,1,0,0

Class selector, attribute selector, pseudo‑class (:link, :hover, etc.): 0,0,1,0

Element (type) selector (e.g., div, p): 0,0,0,1

Universal selector (*), :not pseudo‑class, and combinators (>, +, ~) have no weight: 0,0,0,0

Examples:

(1) ul#nav li.active a contains three element selectors, one ID selector, and one class selector. Adding the values gives 0,1,1,3, so this selector outranks a rule with 0,0,1,3.

(2) #footer *:not(nav) li includes one ID selector, one universal selector, one :not pseudo‑class, and two element selectors, resulting in a total specificity of 0,1,0,2.

(3) html > body div [id="testid"] ul li > p comprises six element selectors, one attribute selector, and two combinators, giving a specificity of 0,0,1,6.

By converting selectors to their numeric specificity, developers can predict which rule will be applied when multiple selectors target the same element.