Pseudo-classes

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which syntax correctly applies a pseudo-class?

A a:hover { color: red; }

B a.hover { color: red; }

2. :hover activates when...

A the mouse pointer is over the element

B the element receives keyboard focus

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

A :active

B :focus

4. li:first-child selects...

A every li element on the page

B the first li inside its parent

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

A Double colon — e.g. ::hover

B Single colon — e.g. :hover

Match the Pairs

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

Left column		Right column
1a:hover		AWrong — a dot selects a class, not a state. Use a colon: a:hover
2input:focus		BStyles an input when it receives keyboard or click focus
3Targets the last child element in a parent		CWrong — pseudo-classes use one colon, not two. Use button:active
4Targets elements by their numeric position among siblings		Dli:last-child
5a.hover { color: red; }		Ep:nth-child(2)
6button::active { background: blue; }		FStyles a link when the mouse pointer is over it

Definitions

pseudo-class

Fill in the Blanks

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

a:_____ { color: red; }

input:_____ { outline: 2px solid blue; }

li:___________ { font-weight: bold; }

li:__________ { color: gray; }

button:______ { background: green; }

Spot the Error

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

Question 1

A a.hover {

B color: orange;

C }

Question 2

A input:focus {

B border 2px solid blue;

C }

Question 3

A button:active {

B background: darkblue;

C colour: white;

Question 4

A a:visited {

B text-decoration: none;

C color: purple;

D opacity = 0.8;

Question 5

A li:first-child {

B font-size: 18px;

C font-weight: bold;

D color: navy;

E text-align centre;

Answer Key

Pseudo-classes

Section A: Quick Questions

A — a:hover { color: red; }

A — the mouse pointer is over the element

A — :active

B — the first li inside its parent

B — Single colon — e.g. :hover

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

Section C: Definitions

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.

Section D: Fill in the Blanks

a:hover {
  color: red;
}

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

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

li:last-child {
  color: gray;
}

button:active {
  background: green;
}

Section E: Spot the Error

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.

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

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

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

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