HTML and CSS · lesson 17 of 30 · free

Which CSS rule wins? — HTML and CSS for kids

Sometimes two rules try to give the same element different colours. CSS decides with two simple ideas. First, the stronger selector wins: an id selector beats a class selector, and a class selector beats an element selector. Second, if the selectors are equally strong, the rule that comes later wins. This is the cascade in Cascading Style Sheets.

▶ Watch how it works

Got it? Practise ↓

Code tip

Stronger first, then later — “the stronger selector wins; if equal, the later rule wins”

  1. Strength: #id > .class > element.
  2. The stronger selector wins, wherever it is written.
  3. Equal strength: the later rule wins.

Use it for: Fixing “my colour does not change” problems and writing tidy style sheets.

Worked example: ⚖️ What colour is the text of this element?
<p class="menu" id="hero">Hi</p>
CSS:
.menu { color: blue; }
#hero { color: orange; }
p { color: purple; } → orange

  1. All three rules match the element.
  2. The id selector #hero is the strongest, so orange wins (even though p comes later).

Check: id beats class and element — orange ✓

▶ Watch it animated

✏️ Practice

Work it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.

Right: 0 · Tried: 0

🏁 Lesson 17 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the ⚖️ Cascade Judge badge when you pass — and a certificate when you finish all 10 lessons of Part 2 · CSS. You can still take the test without signing in.

🖨️ CSS Worksheet: Which Rule Wins

✨ Free AI tutor

Ask the AI tutor about this lesson

Why does it work? When should you use it? Ask in English, मराठी or हिंदी.

Sign in with Google to ask Free — 20 questions a day.

👩‍🏫 HTML and CSS classes near you — online or at home

Prefer a real teacher? TalentJR teachers take live online classes anywhere in India and visit homes in selected cities. Tell us what you need and our team will call you with timings and fees.

Live online classesSmall groups or 1:1 with a teacher, from home, any city.
Teacher at homeA TalentJR teacher visits your home (selected cities).
At a centreClasses at a TalentJR partner centre near you, where available.
Badges, certificates & gifts A badge for every lesson you pass, a certificate for every part you finish, plus TalentJR Points for daily practice. Computer worksheets Flowcharts, block coding, spreadsheets and safe internet.