Child Selectors

CSS Child Selectors

A CSS child selector selects elements that are direct children of another matching element. It uses the greater-than symbol (>) between selectors and is useful when you want to target only one level of an HTML structure.

Child Selector Syntax

A child selector is written with the child combinator (>) between two selectors. The selector on the left identifies the parent, while the selector on the right identifies the direct child to select.

section > p {
  color: blue;
}

The selector section > p selects <p> elements whose parent is directly a <section> element.

Selecting Direct Children

A child selector matches only elements located immediately inside the matching parent element.

section > p {
  color: blue;
}

<section>
  <p>This paragraph is a direct child.</p>
  <div>
    <p>This paragraph is nested inside the div.</p>
  </div>
</section>

The first paragraph is a direct child of the <section>, so it matches. The second paragraph is a child of the <div>, not the <section>, so it does not match.

Nested Elements

The difference between a child and a descendant depends on the HTML structure. A direct child is nested immediately inside its parent, while a deeper descendant has one or more elements between it and the ancestor.

<article>
  <h2>Article Heading</h2>
  <p>Direct child of the article.</p>
  <section>
    <p>Child of the section and descendant of the article.</p>
  </section>
</article>

With the selector article > p, only the first paragraph matches. The paragraph inside the <section> is still a descendant of the <article>, but it is not its direct child.

article > p {
  color: green;
}

Using Classes with Child Selectors

Child selectors can use classes, IDs, element selectors, and other selector types. A class is useful when the direct-child relationship should apply only within a particular component or section.

.notice > p {
  color: red;
}

<div class="notice">
  <p>This paragraph is a direct child.</p>
  <div>
    <p>This paragraph is nested more deeply.</p>
  </div>
</div>

The selector .notice > p selects only paragraphs that are direct children of an element with the notice class.

Selecting Multiple Child Levels

More than one child combinator can be used when the HTML structure contains several specific parent-and-child relationships.

nav > ul > li {
  font-weight: bold;
}

<nav>
  <ul>
    <li>Home</li>
    <li>Tutorials</li>
    <li>References</li>
  </ul>
</nav>

The selector requires the <ul> to be a direct child of <nav> and the <li> elements to be direct children of that <ul>.

Child selectors can be useful when the structure itself is important, but long selector chains should be avoided when a simpler selector can identify the same elements.

Child vs Descendant Selectors

Child and descendant selectors both describe relationships between HTML elements, but they differ in how deeply they can match.

<section>
  <p>Direct child</p>
  <div>
    <p>Deeper descendant</p>
  </div>
</section>

The selector section p matches both paragraphs. The selector section > p matches only the first paragraph because it is directly inside the <section>.

When to Use Child Selectors

Child selectors are useful when the HTML hierarchy matters and a rule should apply only to elements immediately inside another element. They can prevent styles from unintentionally reaching similar elements nested more deeply.

nav > ul {
  list-style: none;
}

.card > h2 {
  margin-top: 0;
}

article > p {
  line-height: 1.6;
}

Use a descendant selector when any nesting level should match. Use a child selector when only the immediate parent-and-child relationship should match.

Summary

A CSS child selector uses the > combinator to select elements that are direct children of another matching element. Unlike a descendant selector, it does not match elements nested more deeply inside additional elements.

Child selectors are useful when CSS should depend on a specific parent-and-child relationship in the HTML structure. The next tutorial covers sibling selectors, which select elements according to their relationship with other elements that share the same parent.