Cascade, Specificity & Inheritance

Why one rule wins over another.

Video tutorialTrack course · freeCodeCamp

CSS Full Course — Zero to Hero

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 1 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

9/9

1. 00:00Cascade, Specificity & Inheritance. Why one rule wins over another.
2. 00:05When two rules target the same element, the winner is decided by specificity, then by source order.
3. 00:12Specificity is counted as (inline, id, class/attribute/pseudo-class, element).
4. 00:17Inline style = 1,0,0,0
5. 00:22#id = 0,1,0,0
6. 00:27.class, [attr], :hover = 0,0,1,0
7. 00:32div, p, ::before = 0,0,0,1
8. 00:37!important overrides everything — use it as a last resort.
9. 00:42Try it yourself — edit the sample and run it in the browser.

When two rules target the same element, the winner is decided by specificity, then by source order. Specificity is counted as (inline, id, class/attribute/pseudo-class, element).

• Inline style = 1,0,0,0
• #id = 0,1,0,0
• .class, [attr], :hover = 0,0,1,0
• div, p, ::before = 0,0,0,1
• !important overrides everything — use it as a last resort.