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.