Class selectors

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which syntax correctly selects all elements with class="menu"?

A #menu

B .menu

2. Can the same class be applied to more than one element on a page?

A No, each class can only appear once

B Yes, classes can be reused on many elements

3. What does p.note target?

A Only p elements that also have class="note"

B All p elements AND all elements with class="note"

4. Is class="intro summary" valid HTML for applying two classes?

A Yes, space-separated values give an element multiple classes

B No, you must use two separate class attributes

5. Which is the correct CSS selector for class="btn"?

A .btn

B btn

Match the Pairs

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

Left column		Right column
1.warning		Aclass="card"
2p.note		Bclass="card featured"
3Reusable across many elements on the page		CSelects every element whose class attribute includes the value warning
4Applying multiple classes to one element		DTargets only p elements that also carry the class note
5class=".highlight"		EThe dot belongs in the CSS selector, not in the HTML class attribute value
6highlight { color: red; }		FMissing the leading dot — without it this is a type selector, not a class selector

Definitions

.classname

Fill in the Blanks

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

__________ { color: red; }

<p class="______">Hello</p>

p________ { font-size: 14px; }

.______ { border: 1px solid; }

Spot the Error

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

Question 1

A <p class=".note">Remember this.</p>

B .note {

C color: blue;

D }

Question 2

A .banner {

B background: navy

C color: white;

D }

Question 3

A <h2 class="title">Welcome</h2>

B title {

C font-size: 2rem;

D }

Question 4

A .card {

B padding: 16px;

C border-radius 8px;

D }

Question 5

A p .highlight {

B color: green;

C }

Answer Key

Class selectors

Section A: Quick Questions

B — .menu

B — Yes, classes can be reused on many elements

A — Only p elements that also have class="note"

A — Yes, space-separated values give an element multiple classes

A — .btn

Section B: Match the Pairs

.warning → Selects every element whose class attribute includes the value warning

p.note → Targets only p elements that also carry the class note

Reusable across many elements on the page → class="card"

Applying multiple classes to one element → class="card featured"

class=".highlight" → The dot belongs in the CSS selector, not in the HTML class attribute value

highlight { color: red; } → Missing the leading dot — without it this is a type selector, not a class selector

Section C: Definitions

.classname — A CSS selector that targets every element whose class attribute matches classname, written with a leading dot

Section D: Fill in the Blanks

.highlight {
  color: red;
}

<p class="notice">Hello</p>

p.warning {
  font-size: 14px;
}

.active {
  border: 1px solid;
}

<div class="card primary">

Section E: Spot the Error

A — The class attribute value must not include the dot. Write class="note" not class=".note". The dot is CSS syntax used only in the selector, not in the HTML attribute.

B — The background declaration is missing a semicolon. It should be background: navy; — every CSS declaration must end with a semicolon.

B — The selector is missing the leading dot. To target elements with class="title" it must be .title not title, which would target h2 elements by type.

C — The border-radius declaration is missing a colon after the property name. It should be border-radius: 8px; — a colon is required between property and value.

A — The space between p and .highlight makes this a descendant combinator, selecting .highlight elements inside a p. To target only p elements with that class, write p.highlight with no space.