Three rules, one element — specificity decides
Three rules all set color on the same link. They are ordered
winner first, so the green win is specificity, not source order.
rendered color: —
| selector | (a,b,c) | color tried |
|---|---|---|
#nav .item a | (1,1,1) | green |
.item a | (0,1,1) | yellow |
a | (0,0,1) | red |
| winner highest (a,b,c), compared left-to-right → green | ||
Compare the ID column first: 1 > 0, so #nav .item a wins outright — the CLASS and TYPE columns are never even looked at.
Compute a selector's specificity
Same specificity() function as selectors_specificity.js. Type a selector:
(1,1,1) decimal 111
Try: li · ul li · .item · #nav ·
a[href]:hover · ::before · * · .a.b.c