Everyone Can Learn Program
中文 Start learning
Core · FrontendLesson 3 of 8Free to read

Selectors and the cascade · Frontend: HTML, CSS and JavaScript

When two CSS rules disagree, which one wins?

Course contents

Why you need it

CSS decides how everything looks. On a real site, many rules touch the same element: a base style, a component style, a special case. When the colour comes out wrong, the reason is almost always the cascade, and knowing its rules turns guessing into a quick fix.

The intuition

A CSS rule picks elements with a selector and sets properties:

h1 { color: tomato; }
SelectorPicks
pevery <p>
.noteevery element with class="note"
#introthe element with id="intro"
nav aevery a somewhere inside a nav
ul > lili that are direct children of a ul

When several rules set the same property on one element, the browser decides in this order:

  1. Specificity: count ids, then classes, then tags. #intro (1,0,0) beats .note (0,1,0) beats p (0,0,1). p.note is (0,1,1), which beats .note.
  2. Order: on a tie, the rule written later wins.
  3. An inline style="…" beats both, and !important beats everything. Avoid them: they make the next change harder.

Some properties are inherited: color and font-family set on a parent flow down to the text inside. Box properties like border and padding are not.

Definition

Selector

The part before { } that says which elements a rule applies to.

Specificity

A score (ids, classes, tags) that decides between rules aimed at the same element. Higher wins; on a tie the later rule wins.

Inheritance

Text properties such as color and font-family pass from a parent element to the elements inside it, unless they set their own.

Examples

Three rules, one paragraph

Run it in the lesson

All three rules match the paragraph. Specificity decides.

<style>
  p { color: grey; }
  #tip { color: green; }
  .note { color: navy; }
</style>
<p id="tip" class="note">Drink water.</p>
Step by step
  1. L2Matches: score (0,0,1).
  2. L3Matches: score (1,0,0), the highest.
  3. L4Matches: score (0,1,0). It's later than #tip, but order only matters on a tie.
  4. L6The paragraph is green.

Inherited and not inherited

Run it in the lesson

The colour flows down to the span; the border doesn't.

<style>
  .box { color: purple; border: 2px solid black; }
</style>
<div class="box">
  Outer text and <span>a span inside</span>
</div>
Step by step
  1. L2Both properties are set on the div only.
  2. L5The span has no rules of its own: its text is purple (inherited), but it gets no border of its own.

Common mistakes

Fighting with !important

It works once, then the next fix needs another !important. Make the selector more specific instead, or simplify the rules.

Thinking order always wins

A later rule only wins when specificity is equal. .note written last still loses to #tip written first.

Styling with ids

An id can be used once per page and its high specificity is hard to override. Prefer classes for styling.

Quick quiz

1. Which selector has the highest specificity?

  1. A#menu
  2. B.menu a
  3. Cnav ul li a
Show the answer

Answer: A

One id (1,0,0) beats any number of classes and tags.

2. `.note { color: red }` comes first and `p.note { color: blue }` second. What colour is `<p class="note">`?

  1. Ablue
  2. Bred
  3. CIt depends on the browser
Show the answer

Answer: A

p.note scores (0,1,1), higher than .note at (0,1,0).

Practice

3 exercises in three steps: predict what a program prints, change a program to meet a new requirement, then write one from scratch. Your code runs in the browser and is checked the moment you submit.

  1. PredictWho wins?

    What colour is the heading?

  2. ModifyMake the warning red

    The warning should be red but shows grey. Change the CSS so it's red and the first note stays grey. Don't use !important or a style= attribute.

  3. WriteStyle a price list

    Write CSS in the <style> block so that:

    • the whole list uses the font Georgia
    • every .price is bold
    • prices of items on sale (li.sale) are red; other prices keep their default colour

Practise this lesson

Open the interactive lesson to edit and run these examples and solve the exercises with instant feedback. Free to start, no sign-up.

Open the interactive lesson Course map

Interactive lessons open in order. If you have not done the earlier ones yet, you start at the course map.

Terms in this lesson

TermChineseDefinition
CSSCSSCascading Style Sheets: the rules that decide how HTML looks.
Selector选择器The pattern that picks which elements a CSS rule applies to.
Specificity优先级（特异性）The (ids, classes, tags) score that decides between conflicting rules.
Cascade层叠The rules a browser uses to pick one value when several CSS rules conflict.