CSS Selectors Interactive Exercise

Instructions

In this exercise, you will practice using CSS selectors to style specific elements on a page.

You can experiment with different selectors in the code editor on the left. The preview on the right will update to show your changes when you click "Apply".

Below the playground, you'll find challenges to test your knowledge of CSS selectors.

CSS Editor

Preview

This is a heading

This is a paragraph with some special text.

This paragraph has a unique ID.

First item
Second item (with class)
Third item

Paragraph inside a div

Another paragraph with a link inside.

Common CSS Selectors Reference

Selector	Example	Description
Element	`p { }`	Selects all paragraph elements
Class	`.special { }`	Selects all elements with class="special"
ID	`#unique { }`	Selects the element with id="unique"
Descendant	`div p { }`	Selects all <p> elements inside <div> elements
Child	`div > p { }`	Selects all <p> elements that are direct children of a <div> element
Pseudo-class	`a:hover { }`	Selects links when mouse hovers over them
Pseudo-element	`p::first-line { }`	Selects the first line of all <p> elements
Adjacent Sibling	`h1 + p { }`	Selects <p> elements that directly follow an <h1>

Selector Challenges

Challenge 1: Write a selector that targets all list items with the class "special".

Try combining an element selector with a class selector.

Challenge 2: Write a selector that targets all links inside paragraphs.

Use a descendant selector with two element selectors.

Challenge 3: Write a selector that targets all paragraphs that are direct children of a div with class "container".

Combine a class selector with a child combinator (>) and an element selector.

Challenge 4: Write a selector that targets the first list item.

Use the :first-child or :first-of-type pseudo-class.