← HTML & CSS

Pseudo-classes

A keyword added after a selector with a colon that targets an element based on its state or position, e.g. :hover or :focus.

Part of: HTML and CSS Journey — Module 38

Understanding Pseudo-classes in HTML & CSS

What it does: :last-child selects the final child element within its parent container. Pseudo-classes use a colon (:). A dot (.) selects a class attribute, not a state. :hover responds to mouse position. :focus responds to keyboard or click focus. :first-child targets only the first child of a parent, not all matching elements. :visited applies to links in the browser's history. :active applies during a click. a:hover is a pseudo-class selector that activates on mouse-over. input:focus applies whenever the input element is focused by the user.

Common mistakes: Pseudo-classes use a colon, not a dot. a.hover tries to match an element with class='hover'. The correct selector is a:hover. CSS declarations need a colon between the property and value. It should be border: 2px solid blue; not border 2px solid blue;.

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 Pseudo-classes 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 applies a pseudo-class?

a:hover { color: red; }a.hover { color: red; }

Matches

a.hover { color: red; }

↓

Wrong — a dot selects a class, not a state. Use a colon: a:hover

Applying

Meanings

Term

pseudo-class

Meaning

A keyword added after a selector with a colon that targets an element based on its state or position, e.g. :hover or :focus.

Practice

a:hover {

Testing

Gaps

a: {

Check Answer

Spots

1a.hover {

2 color: orange;

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 applies a pseudo-class?

A. a:hover { color: red; } ✓

B. a.hover { color: red; }

Pseudo-classes use a colon (:). A dot (.) selects a class attribute, not a state.

2. :hover activates when...

A. the mouse pointer is over the element ✓

B. the element receives keyboard focus

:hover responds to mouse position. :focus responds to keyboard or click focus.

3. Which pseudo-class targets an element while it is being clicked?

A. :active ✓

B. :focus

:active applies during a click. :focus applies after an element is selected via keyboard or click.

4. li:first-child selects...

A. every li element on the page

B. the first li inside its parent ✓

:first-child targets only the first child of a parent, not all matching elements.

5. Pseudo-classes use a single colon or double colon?

A. Double colon — e.g. ::hover

B. Single colon — e.g. :hover ✓

Pseudo-classes always use one colon. Double colons (::) are reserved for pseudo-elements like ::before.

Match the Pairs

a:hover → Styles a link when the mouse pointer is over it

input:focus → Styles an input when it receives keyboard or click focus

Targets the last child element in a parent → li:last-child

Targets elements by their numeric position among siblings → p:nth-child(2)

a.hover { color: red; } → Wrong — a dot selects a class, not a state. Use a colon: a:hover

button::active { background: blue; } → Wrong — pseudo-classes use one colon, not two. Use button:active

Key Term

pseudo-class

A keyword added after a selector with a colon that targets an element based on its state or position, e.g. :hover or :focus.

Fill in the Blanks

1. a:hover { color: red; }

Hint: Type the pseudo-class that activates when a mouse pointer moves over an element

2. input:focus { outline: 2px solid blue; }

Hint: Type the pseudo-class that activates when an element receives keyboard or click focus

3. li:first-child { font-weight: bold; }

Hint: Type the pseudo-class that targets the first child element inside a parent

4. li:last-child { color: gray; }

Hint: Type the pseudo-class that targets the last child element inside a parent

5. button:active { background: green; }

Hint: Type the pseudo-class that applies while a button is being clicked

Spot the Error

Question 1

A a.hover {

B color: orange;

C }

Line A — Pseudo-classes use a colon, not a dot. a.hover tries to match an element with class='hover'. The correct selector is a:hover.

Question 2

A input:focus {

B border 2px solid blue;

C }

Line B — CSS declarations need a colon between the property and value. It should be border: 2px solid blue; not border 2px solid blue;

Question 3

A button:active {

B background: darkblue;

C colour: white;

Line C — The CSS property is color (American English), not colour. It should be color: white; not colour: white;

Question 4

A a:visited {

B text-decoration: none;

C color: purple;

D opacity = 0.8;

Line D — CSS uses a colon between property and value, not an equals sign. It should be opacity: 0.8; not opacity = 0.8;

Question 5

A li:first-child {

B font-size: 18px;

C font-weight: bold;

D color: navy;

E text-align centre;

Line E — A colon is missing between property and value, and CSS uses the American spelling center. It should be text-align: center;

Student with a class code? Join your class →