Frontend · interactive
The CSS cascade and specificity
Several rules can set the same property on one element. The browser picks a winner: !important first, then the most specific selector, then whichever came last. Switch rules on and off.
<a id="buy" class="btn primary">
Buy now
Specificity as (inline, ids, classes, elements). Crossed out: applies but loses.
.btn.primary wins. Higher specificity: (0,0,2,0) beats (0,0,1,0).
Tick the rules in the list to apply them.
1 !important declarations beat normal ones. Browser defaults lose to your styles.
Cascade layers (@layer) also sit here.
2 3 4
In production
Tools and technologies
Browsers resolve conflicting styles the same way.
Not tied to one language — use these names when you search docs or design a system.