Styla saysSpecificity decides which rule wins when several target the same element: inline > id > class > tag.
When rules conflict, the browser scores specificity: inline styles beat ids, ids beat classes/attributes/pseudo-classes, those beat tag selectors. Ties break by source order (later wins). !important overrides everything but is a last resort. Understanding this stops the "why won't my style apply?" frustration.
Power-ups you unlock
inline > #id > .class/[attr]/:pseudo > tag
Ties break by later source order
!important overrides all — use rarely
Keep specificity low so rules stay overridable
The Specificity Sphinx attacks — common mistakes
Escalating to !important instead of fixing specificity
Over-qualifying selectors (div.card.box#x)
Letting an id rule block every class tweak
Boss battleMake a tag rule, a class rule, and an id rule all target one element. Predict which color wins, then verify.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>p{color:gray}.x{color:#8aff9d}#y{color:#b388ff}</style></head><body style="background:#06040d"><p id="y" class="x">id wins this one</p></body></html>