The Child Combinator

The Child Combinator allows for very precise contextual styling. While the Descendant Combinator (space) targets an element nested anywhere inside a parent, the Child Combinator (>) targets elements that are direct children—meaning they are only nested one level deep.

This selector is ideal when you need to style only the immediate children of a component and leave deeper nesting untouched.

How to Use the Child Combinator

The Child Combinator is represented by the greater-than sign (>) placed between two selectors.

The Syntax

/* Child Combinator Syntax */
parent_selector > child_selector {
  /* styles applied ONLY to the immediate child_selector */
}

• parent_selector: The direct parent element (e.g., .card, ul).
• child_selector: The element that must be the immediate child of the parent.

Example

Imagine a list structure where you want to style only the top-level list items, but not any nested sub-lists.

HTML Structure

<ul class="main-menu"> 
  <li>Item 1</li>
   <li>
    Item 2
    <ul>
      <li>Sub-Item 2.1</li> 
    </ul>
  </li>
  <li>Item 3</li>
</ul>

CSS Rule

/* Targets ONLY <li> elements that are IMMEDIATE children of .main-menu */
.main-menu > li {
  font-weight: bold;
  color: #c2185b; /* Deep Pink */
  border-bottom: 1px solid #f8bbd0;
}

In the example above, the styles are applied to "Item 1," "Item 2," and "Item 3," but not to "Sub-Item 2.1," because that sub-item's direct parent is the inner <ul>, not .main-menu.

Child vs. Descendant (The Critical Difference)

Understanding the distinction between the two most common combinators is vital for writing robust CSS.

Combinator	Syntax	Rule	Scope
Descendant	A B (Space)	Selects B nested anywhere inside A.	Broad and less strict.
Child	A > B (Greater-than)	Selects B only if it is the immediate child of A.	Strict and specific (one level deep).

Visualizing the Difference

Consider the same HTML:

index.html

<div class="header">
  <p>Paragraph 1</p> 
  <section>
    <p>Paragraph 2</p> 
  </section>
</div>

Selector	Targets	Why?
.header p	Paragraph 1 and 2	The space targets all descendants.
.header > p	Paragraph 1 only	The > targets only the immediate children.

Interactive Child Combinator Demo

In this demo, try changing the CSS rule from the Child Combinator (>) to the Descendant Combinator (space) to see how the scope of the rule changes instantly.

Challenge: Change .widget-footer > a to .widget-footer a and observe how the "Legal Text Link" suddenly receives the style, proving it is a descendant, but not a direct child.