Child selector in CSS

Introduction

The child selector helps you style only direct children of an element. It keeps your styles neat and specific.

You want to style only the immediate list items inside a menu, not nested submenus.

You want to add spacing only between direct paragraphs inside a section, ignoring paragraphs inside divs.

You want to color only the first-level headings inside an article, not headings inside nested elements.

You want to apply a border only to direct child images inside a container, not images inside nested elements.

Syntax

CSS

parent > child { 
  property: value;
}

The > symbol means 'direct child'.

It selects only elements that are immediate children, not deeper descendants.

Examples

This styles only list items that are direct children of an unordered list.

CSS

ul > li {
  color: blue;
}

This adds top margin only to paragraphs directly inside a div.

CSS

div > p {
  margin-top: 1rem;
}

This makes only the direct h2 headings inside a section bold.

CSS

section > h2 {
  font-weight: bold;
}

Sample Program

This example colors direct list items green and bold. Nested list items inside another list are gray and normal weight.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Child Selector Example</title>
  <style>
    ul > li {
      color: green;
      font-weight: bold;
    }
    ul li li {
      color: gray;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <ul>
    <li>Direct child item 1</li>
    <li>Direct child item 2
      <ul>
        <li>Nested child item 1</li>
        <li>Nested child item 2</li>
      </ul>
    </li>
    <li>Direct child item 3</li>
  </ul>
</body>
</html>

Important Notes

Use the child selector to avoid styling nested elements unintentionally.

It helps keep your CSS organized and predictable.

Summary

The child selector > targets only direct children.

It is useful for precise styling in nested HTML structures.

It keeps styles from affecting deeper 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