HTML and CSS · lesson 13 of 30 · free

Selectors: element, class and id — HTML and CSS for kids

A selector chooses which elements a rule styles. An element selector such as p picks every paragraph. A class selector starts with a dot and picks every element with that class — many elements can share a class. An id selector starts with a hash and picks the one element with that id — an id is used only once on a page.

▶ Watch how it works

Got it? Practise ↓

Code tip

Dot for class, hash for id — “a plain name picks a tag, a dot picks a class, a hash picks an id”

  1. p matches every <p>; .note matches class="note"; #top matches id="top".
  2. A dot means class, a hash means id — mixing them up matches nothing.
  3. Many elements can share a class; an id belongs to only one element.

Use it for: Styling just one part of a page, like a menu, a warning box or a big title.

Worked example: 🎯 Which CSS selector matches this element?
<li class="big" id="main">Hello</li> → #main

  1. The element is <li> with class “big” and id “main”.
  2. It matches li, .big and #main — of the choices only #main.

Check: #main → id="main" ✓ (a .main would need class="main")

▶ 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 13 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 🎯 Selector Sharpshooter 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: Selectors Class and Id

✨ 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.