ID selectors

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A #hero { }

B .hero { }

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

3. Which has higher CSS specificity?

A Class selector (.box)

B ID selector (#box)

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

A No — there should be no space after #

B Yes — the space is fine

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

A class

B id

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1#intro { color: navy; }		AAdds an id attribute so this heading can be targeted with #title in CSS
2<h1 id="title">Hello</h1>		BWrong selector type — a dot targets a class, not an id; should be #logo
3ID values must be unique on a page		C<p id="note">One note</p>
4ID selectors have higher specificity than class selectors		DTargets the element with id="intro" and sets its text colour to navy
5# hero { color: red; }		EInvalid — a space between # and the name breaks the selector; write #hero
6.logo { width: 100px; }		F#box { background: red; }

Definitions

#id

Fill in the Blanks

Complete each line of code by filling in the missing parts.

_______ { color: blue; }

<p id="_____">Hello</p>

_____ { background: red; }

#nav { _________: 18px; }

_______ { margin: 0; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <style>

B .hero { color: red; }

C </style>

Question 2

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

B <style>

C #banner color: gold; }

Question 3

A # title {

B font-size: 24px;

C }

Question 4

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

B <style>

C .main { background: grey; }

D </style>

Question 5

A <style>

B #intro { color: navy; }

C </style>

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

Answer Key

ID selectors

Section A: Quick Questions

A — #hero { }

A — No — id values must be unique

B — ID selector (#box)

A — No — there should be no space after #

B — id

Section B: 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

Section C: Definitions

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

Section D: Fill in the Blanks

#header { color: blue; }

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

#main { background: red; }

#nav { font-size: 18px; }

#footer { margin: 0; }

Section E: Spot the Error

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

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

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

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

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