The child combinator (>) sits between two selectors. It matches elements from the second selector that are direct children of elements from the first.
It is stricter than the descendant combinator (a space), which matches any nesting depth. Use > when nested items must not get the same styles as top-level children.
Not deprecated. Cross-browser since about July 2015.
Spaces around > are optional. Prefer div > span for readability.
parent > child { /* styles for direct children only */ }Example: ul.my-things > li styles only list items that are immediate children of that list.
| Pattern | Description | Try it |
|---|---|---|
div > span | Spans that are direct children of a div | Try it |
ul > li | Top-level list items only | Try it |
.card > h2 | Heading that is a direct child of .card | Try it |
| vs space | Compare > with the descendant space | Try it |
nav > ul > li | Chain child combinators for a path | Try it |
article > p | Paragraphs directly under an article | Try it |
Decide whether nesting should inherit the style. If not, use >.
parent > child { … }.Toggle between div > span and div span. Watch which spans turn yellow.
Yellow marks matches of >. Nested copies stay plain unless you use a descendant selector. Use Try It Yourself for a live editor.
div > spanStyle only spans that sit directly inside the div.
<style>
div > span {
background: #fef08a;
}
</style>
<div>
<span>Direct child
<span>Nested</span>
</span>
</div>div. Only its structure matters for >.span matches.ul > liStyle top-level list items without styling nested lists the same way.
<style>
ul > li {
font-weight: 700;
color: #1d4ed8;
}
</style>
<ul>
<li>Top
<ul>
<li>Nested</li>
</ul>
</li>
<li>Also top</li>
</ul>ul > li. Matches items of every ul that are direct children.li also matches. It is a direct child of the nested ul — still one level under its own parent..menu > li..card > h2Style the card title without styling headings buried deeper inside.
<style>
.card > h2 {
color: #7c3aed;
margin: 0 0 0.5rem;
}
</style>
<div class="card">
<h2>Card title</h2>
<div>
<h2>Nested heading</h2>
</div>
</div>.card. Limits the rule to that component.h2 matches. The title turns purple.h2 skips. A wrapping div breaks the direct-child link.Most surprises come from assuming > skips nested lists entirely, or from confusing it with siblings.
section > p ignores a p wrapped in another element inside the section.
ul > li still hits nested listsNested li elements are direct children of their own ul. Scope with a class when you need outer items only.
div span matches every nested span. Use descendant when that is intentional.
>Spaces and newlines between tags are fine. The combinator still sees the element children.
The child combinator (>) is a browser CSS selector feature. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and IE 7+. Widely available since July 2015.
Bottom line: Safe for precise layout targeting everywhere. Prefer > when nesting should not inherit. It is not a runtime API.
parent > child.> is one level.ul > li should differ.>.One line: use > when only direct children should get the style.
Select nested elements at any depth with a space.
8 people found this page helpful