CSS Selectors Exercises

Practice CSS selectors on this interactive page.

Exercise 1: Element Selectors

Change the color of paragraphs to red.

Paragraph to be colored red.

Another paragraph to be colored red.

Paragraph with a different class.

Exercise 2: Class Selectors

Apply a yellow background to elements with the class "special".

Paragraph with the class "special".

Another paragraph with the class "special".

Paragraph with multiple classes.

Exercise 3: Direct Child Selectors

Apply a dotted border style to paragraphs that are direct children of a div.

Direct child paragraph.

Text in a span, not a paragraph.

Another direct child paragraph.

This paragraph should not be affected.

Exercise 4: ID Selectors

Add a solid red 2-pixel border to the element below with the ID "main-header".

Header with an ID.

Exercise 5: Attribute Selectors

Apply a dotted border to text input fields.

Exercise 6: Combined Selectors

Apply a gray background color to paragraphs with the class "highlight" that are direct children of a div with the ID "special-container".

Direct child paragraph with the class highlight.

Text in a span with the class highlight, not a paragraph.

Another direct child paragraph with the class highlight.

This paragraph with the class highlight should not be affected because it is not in the div with the ID "special-container".

Exercise 7: Pseudo-Class Selectors

Change the color of links to red when they are hovered over by the mouse.

Link 1 Link 2 Link 3

Exercise 8: Media Queries

Apply a different style to elements with the class "responsive" when the screen width is less than 720px.

This element should change style on a small screen.

Another responsive element to style.