Class selectors

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

Part of: HTML and CSS Journey — Module 35, 9-10 Digital Technologies: Representing online documents — Module 14, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 29

Understanding Class selectors in HTML & CSS

What it does: Unlike an ID, the same class name can appear on multiple elements, making it ideal for shared styles. A dot starts a class selector. A hash starts an ID selector. Chaining a type and class selector with no space restricts the match to elements satisfying both conditions. A single class attribute can hold multiple class names separated by spaces. The dot is CSS syntax. In HTML you write class="classname" with no dot in the attribute value.

Common mistakes: 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. The background declaration is missing a semicolon. It should be background: navy; — every CSS declaration must end with a semicolon.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Class selectors to a class →

This module's key terms are also in a printable crossword (Modules 31–41) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

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

Learning

Duo

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

.menu#menu

Matches

class=".highlight"

↓

The dot belongs in the CSS selector, not in the HTML class attribute value

Applying

Meanings

Term

.classname

Meaning

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

Practice

.highlight {

Testing

Gaps

{

Check Answer

Spots

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

2.note {

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.

Add to class →

Quick Questions

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

A. #menu

B. .menu ✓

A dot starts a class selector. A hash starts an ID selector.

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 ✓

Unlike IDs, class names are designed to be reused across multiple 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"

Chaining a type and class selector with no space restricts the match to elements satisfying both conditions.

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

A single class attribute can hold multiple class names separated by spaces.

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

A. .btn ✓

B. btn

Without the leading dot, btn is a type selector targeting a btn element, not a class selector.

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

Key Term

.classname

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

Fill in the Blanks

1. .highlight { color: red; }

Hint: Type the class selector for a class named highlight, including the dot

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

Hint: Type the class name that matches the selector .notice

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

Hint: Type the class selector that restricts this rule to p elements with class warning

4. .active { border: 1px solid; }

Hint: Type the class name this selector targets, the part after the dot

5. <div class="card primary">

Hint: Type the second class name being applied to this element

Spot the Error

Question 1

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

B .note {

C color: blue;

D }

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

Question 2

A .banner {

B background: navy

C color: white;

D }

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

Question 3

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

B title {

C font-size: 2rem;

D }

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

Question 4

A .card {

B padding: 16px;

C border-radius 8px;

D }

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

Question 5

A p .highlight {

B color: green;

C }

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

Student with a class code? Join your class →