Child selector in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select only direct child <p> elements of a <div>.

CSS

div [1] p { color: blue; }

Drag options to blanks, or click blank then click option'

A(space)

B+

C~

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using a space selects all descendants, not just direct children.

Using '+' selects only the next sibling, not children.

The > symbol selects direct children only, so div > p targets

elements that are immediate children of a

.

2fill in blank

medium

Complete the code to color direct child <li> elements of a <ul> red.

CSS

ul [1] li { color: red; }

Drag options to blanks, or click blank then click option'

A>

B~

C+

D(space)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a space instead of the child selector.

Using sibling selectors like '+' or '~' instead of child selector.

The > selector targets only direct children, so ul > li colors only

elements directly inside

.

3fill in blank

hard

Fix the error in the selector to style only direct child <span> elements inside a <section>.

CSS

section [1] span { font-weight: bold; }

Drag options to blanks, or click blank then click option'

A+

B>

C~

D(space)

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' or '~' which select siblings, not children.

Using a space which selects all descendants.

The > selector ensures only direct child elements inside

are styled bold.

4fill in blank

hard

Fill both blanks to select direct child <h2> elements inside <article> and color them green.

CSS

article [1] h2 { color: [2]; }

Drag options to blanks, or click blank then click option'

A>

Bred

Cgreen

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '~' instead of '>' for direct child selection.

Choosing the wrong color name.

The > selects direct children, and green colors the text green.

5fill in blank

hard

Fill all three blanks to select direct child <a> elements inside <nav>, set text decoration to none, and color to blue.

CSS

nav [1] a { text-decoration: [2]; color: [3]; }

Drag options to blanks, or click blank then click option'

A~

Bnone

Cblue

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '~' or other selectors instead of '>'.

Using incorrect values for text-decoration or color.

The > selects direct children, none removes underline, and blue colors the links blue.