CSS Selectors

CSS Selector Quest: The Selector Guild

In the city of Markup, every element is waiting to be found. A CSS selector is a search spell: it tells the browser exactly which parts of the page should change. Complete each chapter by choosing the right selector block, adding CSS declarations, and checking the result in the CodePen.

1 Chapter 1: The City of Markup Type selectors and a descendant selector

In Markup, every building has a tag name. The grand tower is an h1. The chapter signs are h2 elements. The ordinary citizens are paragraphs, moving through the page with quiet structure. Your first job is to teach CSS how to recognize them.

Selector Map

h1: Finds the main page title.
h2: Finds each chapter heading.
.bio p: Finds paragraphs only when they live inside the bio section.

Mission

In the h1 rule, type color, font-size, and text-align . Choose a title color, make the title noticeably larger than the body text, and decide how it should align.
In the h2 rule, type color . Choose a chapter-heading color that stands apart from regular paragraph text.
In the .bio p rule, type line-height . Choose a line height that makes the story paragraphs easier to read.

Find this selector block in the CSS panel and complete the missing declarations.

Help Links

2 Chapter 2: The Portrait of the Selector Semantic media elements and image styling

The Selector Guild keeps a portrait in the archive. The image and its caption belong together, so the figure needs to behave like a single exhibit piece.

Selector Map

figure: Finds the full image-and-caption group.
figure img: Finds only images inside a figure.
figcaption: Finds the caption text attached to the figure.

Mission

In the figure rule, type margin . Use margin to create space around the whole image-and-caption group and help it feel intentionally placed.
In the figure img rule, type width and border . Use width to control how large the image appears, then add a visible frame with border.
In the figcaption rule, type text-align, font-style, padding-top, and color . Align the caption, make it feel like caption text, add a little space above it, and choose a quieter color.

Find this selector block in the CSS panel and complete the missing declarations.

Help Links

3 Chapter 3: The Link Portals Pseudo-classes for link states

In Markup, links are portals. Some have never been opened. Some have already been visited. Some glow when hovered, focused, or pressed. Pseudo-classes let CSS detect those moments.

Selector Map

a:link: Finds links that have not been visited.
a:visited: Finds links the browser recognizes as visited.
a:focus: Finds a link selected by keyboard or click focus.
a:hover: Finds a link while the pointer is over it.
a:active: Finds a link while it is being activated.

Mission

In the a:link rule, type color and text-decoration . Choose how unvisited links should look before anyone opens them.
In the a:visited rule, type color . Choose a different color for links the browser recognizes as visited.
In the a:focus rule, type outline and background . Make keyboard focus easy to see when a link is selected.
In the a:hover rule, type color and text-decoration . Make the link visibly respond when the pointer is over it.
In the a:active rule, type color . Choose a color for the moment the link is being pressed or activated.

Find this selector block in the CSS panel and complete the missing declarations.

Help Links

4 Chapter 4: The Timeline Trail Class selector plus descendant list items

The Guild records its discoveries on a timeline. A normal list is too plain for this trail, so CSS must find the timeline and then find only the list items inside it.

Selector Map

.timeline: Finds the list with the class name timeline.
.timeline li: Finds list items only when they are inside the timeline.

Mission

In the .timeline rule, type list-style . Change the default bullets so the list can become a custom timeline.
In the .timeline li rule, type border-left, padding-left, and margin-bottom . Use these properties to create a vertical trail, move text away from the trail line, and separate each item.

Find this selector block in the CSS panel and complete the missing declarations.

Help Links

5 Chapter 5: The Quotation Chamber Pull quote styling and a nested cite selector

The oldest rule in the Guild is written as a quotation. It should sound different from the surrounding text. The citation should be quieter than the quote itself.

Selector Map

blockquote: Finds the full quotation block.
blockquote cite: Finds the citation only when it appears inside a blockquote.

Mission

In the blockquote rule, type font-size, font-style, color, border-left, padding, and margin . Make the quote feel different from paragraph text, give it a visual edge, and add breathing room around it.
In the blockquote cite rule, type font-size, color, and font-style . Make the citation smaller and quieter than the quotation itself.

Find this selector block in the CSS panel and complete the missing declarations.

Help Links

6 Chapter 6: The Box Model Castle Semantic layout selectors and spacing

The final lesson takes place inside the Box Model Castle. Every room has content, padding, border, and margin. Use semantic selectors to make those spaces visible.

Selector Map

section: Finds each major content room.
header: Finds the opening banner area.
main: Finds the main content wrapper.

Mission

In the section rule, type background-color, margin-bottom, border, and padding . Make each section visibly separate while exploring outside space, edges, and inside space.
In the header rule, type padding and background . Give the opening area deliberate inside space and a background treatment.
In the main rule, type padding . Add inside space around the main content area.

Find this selector block in the CSS panel and complete the missing declarations.

Help Links

Selector Spellbook

Selector Type	Example	What It Finds
Type selector	`h1`	Finds every matching HTML element.
Class selector	`.timeline`	Finds every element with that class name.
Descendant selector	`.bio p`	Finds matching elements nested inside another selector.
Pseudo-class	`a:hover`	Finds an element in a specific state or interaction moment.

Open the full MDN selectors reference