Lesson 03 · Styling basics

The cascade and specificity

When several rules set the same property on the same element, the browser must pick one. Watch four rules fight over one paragraph's colour: every selector matches, each gets a specificity score (IDs, classes, tag names), equal scores are settled by which rule comes later, and a higher score wins wherever it is written. Then delete the id and see a different rule win.

10 min8 steps5 questionsBeginner

Fig 3 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01What is the specificity of the selector .note?

A class selector counts in the middle column (classes). There are no IDs and no tag names, so the score is 0-1-0.

02Two rules, p { color: gray; } and then p { color: navy; }, both match the same paragraph. Which colour wins?

Both selectors score 0-0-1, a tie. When scores tie, order of appearance decides: the declaration that comes later wins.

03#intro { color: red; } is written before .note { color: teal; }, and both match. Which wins?

Specificity is checked before order. Comparing from the left, #intro has 1 ID and .note has 0, so #intro wins even though it comes first.

04Which score is higher: 0-11-0 (eleven classes) or 1-0-0 (one ID)?

Scores are compared column by column from the left, not added up. The first column that differs decides, and 1 ID beats 0 IDs.

05The paragraph loses its id="intro". What happens to the rule #intro { color: red; }?

Only rules whose selector matches the element take part. With no id on the paragraph, #intro matches nothing, and the best remaining rule (.note, 0-1-0) wins.

Key terms

Glossary

Cascade: The browser's method for choosing one value when several declarations set the same property on the same element.
Conflict: Two or more matching rules that set the same property on the same element to different values.
Specificity: A score for a selector, written IDs-classes-tags, such as 0-1-0. A higher score usually wins a conflict (a few earlier checks, such as !important, come first).
ID selector: A selector that starts with #, such as #intro. It matches the element whose id attribute is intro.
Class selector: A selector that starts with a dot, such as .note. It matches every element whose class attribute includes note.
Type selector: A selector that is a tag name, such as p. It matches every element with that tag.
Order of appearance: The tie-breaker: when two declarations tie on everything else, the one that comes later wins.

Fine print

Notes and sources

Until the contest has run, the figure's browser shows "color: ?" and an uncoloured outline: the winner is not decided yet. A real browser does all of this before it paints anything, so it never shows that state. Opened in a browser, this page is red from the start.
The browser in the figure shows the paragraph enlarged, so its colour is easy to see. The cascade does not change the size.
A real browser does not run a contest rule by rule. It collects every matching declaration and sorts them all at once; the figure takes them one at a time so you can watch each comparison. Both ways give the same winner.
Before specificity, the cascade checks other things: where a style comes from (your stylesheet beats the browser's built-in one), !important, cascade layers and the style attribute. In this lesson all four rules are ordinary rules in one stylesheet, so only specificity and order decide.
The contest is run for each property separately. A rule that loses on color can still win on font-size if no other rule sets it.
Scores are compared column by column, not as one number: 0-11-0 (eleven classes) still loses to 1-0-0. Attribute selectors and pseudo-classes count in the class column; pseudo-elements count as tag names.
Save the full page as index.html and the rules as style.css in the same folder and open index.html: the paragraph is red. Delete id="intro" and reload: it turns teal.

Quiz Unlocks after the last step.