Child selector in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS rule applies only to direct children?

Given the HTML structure:

<div>
  <p>Paragraph 1</p>
  <section>
    <p>Paragraph 2</p>
  </section>
</div>

Which CSS selector will style only the <p> inside the <div> but not the <p> inside the <section>?

A div > p { color: red; }

B div p { color: red; }

C div + p { color: red; }

D div ~ p { color: red; }

💡 Hint

The child selector uses a special symbol between parent and child.

The '>' symbol in CSS means direct child. So 'div > p' styles only paragraphs that are immediate children of the div, not deeper nested ones.

🧠 Conceptual

intermediate

What does the child selector target?

In CSS, what does the child selector (>) select?

A All descendants of an element, no matter how deep

B Only sibling elements that come after an element

C Only the first child of an element

D Only the immediate children of an element

💡 Hint

Think about the difference between '>' and a space in selectors.

The child selector '>' targets only elements that are direct children of a parent, not grandchildren or deeper descendants.

📝 Syntax

advanced

Identify the syntax error in this child selector

What error does this CSS code cause?

div > > p { color: blue; }

CSS

div > > p { color: blue; }

A TypeError: unexpected token '>'

B SyntaxError: double '>' is invalid

C No error, styles paragraphs inside div

D Selector matches all p elements

💡 Hint

Check the number of '>' symbols in the selector.

The child selector uses a single '>' between parent and child. Double '>' is invalid syntax in CSS.

❓ rendering

advanced

What color will the text be?

Given this HTML:

<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Subitem 1</li>
    </ul>
  </li>
</ul>

And this CSS:

ul > li { color: green; }

Which list items will appear green?

CSS

ul > li { color: green; }

A Only 'Item 1' and 'Item 2' will be green

B Only 'Subitem 1' will be green

C All list items will be green

D No list items will be green

💡 Hint

Remember the child selector targets immediate children only.

'Item 1' and 'Item 2' are direct children of the first ul, so they get green. 'Subitem 1' is a child of a nested ul, so it is not selected.

❓ accessibility

expert

Why use child selectors for accessibility styling?

When styling a navigation menu with nested lists, why is it important to use the child selector (>) instead of a descendant selector (space) for focus styles?

A Because child selectors automatically add ARIA roles

B Because descendant selectors do not work with keyboard navigation

C To ensure only top-level menu items get focus styles, avoiding confusion for screen reader users

D To make the menu items larger for better visibility

💡 Hint

Think about how users navigate nested menus and what styles they expect.

Using the child selector limits focus styles to top-level items, helping screen reader and keyboard users understand the menu structure clearly without confusing nested items.

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