The cascade

When rules disagree, specificity decides: inline style beats an id, an id beats a class, a class beats a tag. Only between equals does the later rule win.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

The colour that will not change is always a cascade question. Knowing the order means you find the winning rule instead of adding !important.

How to think about it

Find every rule that matches the element. Rank them: inline, ids, classes, tags. The highest wins; among equals, the last one written.

Worked example

<p class="note" id="one">Which colour?</p><p>Plain</p><p class="note">Note</p>

Three paragraphs: one with a class and an id, one bare, one with the class.

p { color: rgb(200, 0, 0); }

Tag: the weakest.

.note { color: rgb(0, 0, 200); }

Class beats tag wherever it sits: both .note paragraphs go blue.

p { color: rgb(0, 128, 0); }

Same weight as the first rule and later, so it beats it: the plain paragraph is green. The class still wins over it.

#one { color: rgb(0, 0, 0); }

An id beats both: the first paragraph is black, the third stays blue.

Your turn

Beat the class rule with an id.

one { color: black; }

The trap

Reaching for !important. It wins today and makes the next change impossible; find the rule that is winning and write a more specific one, or a later one.

Practise the cascade on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.