← HTML & CSS

ID selectors

A CSS selector that targets one unique element by matching its id attribute; written as a hash symbol followed by the id value

Part of: HTML and CSS Journey — Module 36

What it does: Each id value may appear only once per HTML document; this element correctly uses a unique id. The ID selector #box overrides competing class or element rules due to its higher specificity score. ID selectors start with # followed by the id value. A dot (.) is used for class selectors. An ID selector outweighs any number of class selectors in the cascade. The hash and the id name must be written together with no space: #title. #intro targets the element whose id attribute equals "intro". Hyphens are perfectly valid in id names and selectors. #main-content is common and correct.

Common mistakes: The selector .hero uses a dot (class selector). To target id="hero" it should be #hero { color: red; }. The opening curly brace is missing. It should be #banner { color: gold; }.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of ID selectors (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which selector correctly targets an element with id="hero"?

#hero { }.hero { }

Matches

# hero { color: red; }

↓

Invalid — a space between # and the name breaks the selector; write #hero

Applying

Meanings

Term

#id

Meaning

A CSS selector that targets one unique element by matching its id attribute; written as a hash symbol followed by the id value

Practice

<style>

Testing

Gaps

{ color: blue; }

Check Answer

Spots

1<style>

2.hero { color: red; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which selector correctly targets an element with id="hero"?

A. #hero { } ✓

B. .hero { }

ID selectors start with # followed by the id value. A dot (.) is used for class selectors.

2. Can two elements on the same page share the same id value?

A. No — id values must be unique ✓

B. Yes — ids can be reused

Each id value must appear only once per page. Use a class when multiple elements need the same identifier.

3. Which has higher CSS specificity?

A. ID selector (#box) ✓

B. Class selector (.box)

An ID selector outweighs any number of class selectors in the cascade.

4. Is this ID selector written correctly: # title { color: red; }

A. No — there should be no space after # ✓

B. Yes — the space is fine

The hash and the id name must be written together with no space: #title

5. Which HTML attribute does the # selector match against?

A. id ✓

B. class

#intro targets the element whose id attribute equals "intro".

Match the Pairs

#intro { color: navy; } → Targets the element with id="intro" and sets its text colour to navy

<h1 id="title">Hello</h1> → Adds an id attribute so this heading can be targeted with #title in CSS

ID values must be unique on a page → <p id="note">One note</p>

ID selectors have higher specificity than class selectors → #box { background: red; }

# hero { color: red; } → Invalid — a space between # and the name breaks the selector; write #hero

.logo { width: 100px; } → Wrong selector type — a dot targets a class, not an id; should be #logo

Key Term

#id

A CSS selector that targets one unique element by matching its id attribute; written as a hash symbol followed by the id value

Fill in the Blanks

1. #header { color: blue; }

Hint: Type the ID selector for an element with id="header"

2. <p id="intro">Hello</p>

Hint: Type the id attribute value that matches the selector #intro

3. #main { background: red; }

Hint: Type the ID selector for an element with id="main"

4. #nav { font-size: 18px; }

Hint: Type the CSS property that controls text size

5. #footer { margin: 0; }

Hint: Type the ID selector for an element with id="footer"

Spot the Error

Question 1

A <style>

B .hero { color: red; }

C </style>

Line B — The selector .hero uses a dot (class selector). To target id="hero" it should be #hero { color: red; }

Question 2

A <p id="banner">Sale!</p>

B <style>

C #banner color: gold; }

Line C — The opening curly brace is missing. It should be #banner { color: gold; }

Question 3

A # title {

B font-size: 24px;

C }

Line A — There must be no space between # and the id name. It should be #title { with no gap

Question 4

A <div id="main">Nav</div>

B <style>

C .main { background: grey; }

D </style>

Line C — The selector .main uses a dot (class selector). To target id="main" it should be #main { background: grey; }

Question 5

A <style>

B #intro { color: navy; }

C </style>

D <p class="intro">Hello</p>

Line D — The CSS uses an ID selector #intro but the element uses class="intro". The attribute should be id="intro" to match

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?