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.

Practice

1. What does the CSS child selector > do?

easy

A. Selects all descendants of an element

B. Selects only direct child elements of a parent

C. Selects sibling elements

D. Selects elements by their class name

Solution

1. Step 1: Understand selector types

   The child selector > targets only elements that are direct children of a specified parent.

2. Step 2: Compare with other selectors

   Unlike the descendant selector (space), it does not select nested grandchildren or deeper descendants.

3. Final Answer:

   Selects only direct child elements of a parent -> Option B

4. Quick Check:

   Child selector = direct children only [OK]

Hint: Child selector targets only immediate children, not deeper descendants [OK]

Common Mistakes:

• Confusing child selector with descendant selector
• Thinking it selects siblings
• Assuming it selects all nested elements

2. Which of the following is the correct syntax to select only <li> elements that are direct children of a <ul>?

easy

A. ul > li

B. ul + li

C. ul li

D. ul ~ li

Solution

1. Step 1: Identify the child selector syntax

   The child selector uses the > symbol between parent and child tags.

2. Step 2: Match syntax to question

   To select <li> elements directly inside <ul>, use ul > li.

3. Final Answer:

   ul > li -> Option A

4. Quick Check:

   Correct child selector syntax = ul > li [OK]

Hint: Use > between parent and child tags for direct child selection [OK]

Common Mistakes:

• Using space instead of > selects all descendants
• Using + or ~ which select siblings, not children
• Missing the > symbol

3. Given this HTML:

<div>
  <p>First</p>
  <section>
    <p>Second</p>
  </section>
</div>

And this CSS:

div > p { color: red; }

Which <p> elements will be red?

medium

A. Only 'Second' paragraph

B. Both 'First' and 'Second' paragraphs

C. Only 'First' paragraph

D. No paragraphs will be red

Solution

1. Step 1: Identify direct children of <div>

   The first <p> with text 'First' is a direct child of <div>.

2. Step 2: Check nested <p> inside <section>

   The second <p> with text 'Second' is inside <section>, which is a child of <div>, so it is a grandchild, not direct child.

3. Final Answer:

   Only 'First' paragraph -> Option C

4. Quick Check:

   Child selector affects direct children only [OK]

Hint: Only immediate children match > selector, nested deeper do not [OK]

Common Mistakes:

• Assuming all nested elements are selected
• Ignoring the nesting inside <section>
• Confusing descendant selector with child selector

4. This CSS code is intended to color only direct <li> children of <ol> blue:

ol > li { color: blue }

But it colors all <li> elements inside nested <ol> too. What is the problem?

medium

A. CSS does not support child selectors

B. The selector should be ol li instead

C. Missing semicolon after color property

D. Nested <ol> inside <li> causes deeper <li> to be direct children of inner ol

Solution

1. Step 1: Understand nested lists structure

   Nested <ol> inside <li> creates new direct children <li> for the inner ol.

2. Step 2: Explain why all <li> get colored

   The selector ol > li matches direct children of any ol, including nested ones, so all nested li get colored.

3. Final Answer:

   Nested <ol> inside <li> causes deeper <li> to be direct children of inner ol -> Option D

4. Quick Check:

   Child selector matches direct children of each ol, including nested [OK]

Hint: Nested ol creates new direct children li for inner ol [OK]

Common Mistakes:

• Thinking child selector ignores nested ol
• Confusing semicolon error with selector issue
• Believing CSS lacks child selector support

5. You want to style only the <span> elements that are direct children of <div class='container'>, but not <span> inside nested elements. Which CSS selector achieves this?

hard

A. .container > span

B. .container ~ span

C. .container + span

D. .container span

Solution

1. Step 1: Understand the requirement

   Only <span> elements directly inside <div class='container'> should be styled, excluding nested spans.

2. Step 2: Choose correct selector

   The child selector > selects direct children only, so .container > span matches only spans directly inside the container div.

3. Final Answer:

   .container > span -> Option A

4. Quick Check:

   Child selector > selects direct children only [OK]

Hint: Use > after parent class to select direct child elements only [OK]

Common Mistakes:

• Using space selects all descendants, not just direct children
• Using + or ~ selects siblings, not children
• Missing the > symbol