References

Beginner-friendly references for web development, with live, editable examples.

The CSS > selector

Selector CSS All modern browsers Updated
Quick answer

The CSS child combinator, >, selects elements that are direct children of another — .menu > li matches only the <li> elements one level inside .menu, not those nested deeper. It is more precise than the descendant combinator (a space), which matches at any depth.

Overview

The child combinator, a greater-than sign between two selectors, narrows a match to direct children only. .menu > li selects the list items that are immediate children of .menu, and deliberately skips any <li> nested inside a submenu further down.

That is the key difference from the descendant combinator — a plain space — which matches at any depth. .menu li would catch every <li> inside .menu, submenus included; .menu > li catches only the top level. When you have nested structures and want to style just one layer, the child combinator is how you stay precise.

It is invaluable for components with nesting — menus, comment threads, nested lists — where styles meant for the outer level should not leak into the inner ones.

Syntax

/* only the direct children */
.menu > li {
  border-bottom: 1px solid #e2e8f0;
}

/* compare: any descendant, at any depth */
.menu li { … }

Example

Live example 
<style>
  ul { list-style: none; padding-left: 18px; font: 15px system-ui, sans-serif; }
  .menu > li { background: #1c7ce9; color: #fff; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }
</style>
<ul class="menu">
  <li>Top level (styled)
    <ul><li>Nested (not styled by &gt;)</li></ul>
  </li>
  <li>Top level (styled)</li>
</ul>

Best practices

  • Use > when you want to style one level of a nested structure without affecting deeper levels.
  • Reach for it on menus, nested lists and comment threads, where descendant styles would otherwise leak inward.
  • Remember the plain space (descendant) matches at any depth — choose deliberately between the two.
  • Combine it with the universal selector (.box > *) to target all direct children whatever their type.

Frequently asked questions

What does the > selector do in CSS?
It selects direct children only. .menu > li matches list items one level inside .menu, not those nested deeper.
What is the difference between > and a space in CSS?
The child combinator > matches only direct children; the descendant combinator (a space) matches at any depth.
How do I select only the top-level items of a nested list?
Use the child combinator: .list > li targets the top-level items and ignores items inside nested lists.
Does the child combinator help with nested components?
Yes — it stops styles meant for an outer level from leaking into nested submenus or threads.
:checked .class