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.