Child Selector

Part of the CSS Mastery section of Coddy's HTML journey — lesson 3 of 43.

The child selector ( > ) is used when we want to style elements that are direct children of another element. Unlike the descendant selector, it only selects direct children, not deeper ones.

For example:

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

Apply styling to direct children only:

.parent > p {
  color: red;
}

After applying this CSS, only the first paragraph "This is a direct child" will be red. The second paragraph won't be affected because it's not a direct child of the div with class "parent".

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

You have a .team-container that holds several team sections. Your task is to:

Use the child selector to style direct child divs inside .team-container with a light blue background, padding of 10px, and margin of 5px.
Use the child selector to style direct <h3> elements inside .team divs with a green color and font size of 20px.

Cheat sheet

The child selector (>) selects only direct children of an element, not deeper descendants.

Syntax:

parent > child {
  /* styles */
}

Example:

<div class="parent">
  <p>Direct child - will be styled</p>
  <section>
    <p>Grandchild - won't be styled</p>
  </section>
</div>

.parent > p {
  color: red;
}

Only the first paragraph will be red because it's a direct child of .parent.

Try it yourself

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.