Child selector in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS child selector (>) do?

It selects only the direct children of an element, not deeper nested descendants.

beginner

How would you select all <li> elements that are direct children of a <ul>?

Use the selector ul > li. This targets only li elements directly inside ul, not nested inside other elements.

beginner

True or False: The child selector selects all descendants at any depth.

False. The child selector only selects direct children, not all descendants.

beginner

Example: What elements does div > p select?

It selects all <p> elements that are direct children of a <div> element.

intermediate

Why use the child selector instead of a descendant selector?

To apply styles only to immediate children, avoiding unintended styling of nested elements deeper inside.

Which selector targets only direct children?

A div ~ p

B div p

C div + p

D div > p

The '>' symbol selects direct children only. 'div p' selects all descendants, not just direct children.

What does ul > li select?

A Only <li> that are direct children of <ul>

B All <li> inside <ul>, at any depth

C Only <ul> elements

D Only <li> siblings

The child selector '>' selects only direct children, so only

directly inside

.

True or False: div > p selects <p> inside nested <div> inside another <div>.

A False

B Only if nested directly

C True

D Only if <p> is sibling

False. It selects only

that are direct children of the first

, not nested deeper.

Which selector would style all paragraphs inside a section, no matter how deep?

A section > p

B section p

C section + p

D section ~ p

'section p' selects all

inside

at any depth, unlike the child selector.

Why might you prefer the child selector over the descendant selector?

A To style all nested elements

B To select parents

C To style only immediate children

D To select siblings

The child selector targets only immediate children, preventing styles from affecting deeper nested elements.

Explain how the CSS child selector works and give an example.

Think about selecting only direct children, not all nested elements.

Describe a situation where using the child selector is better than the descendant selector.

Consider when you want to avoid affecting deeply nested elements.

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