ul > li matches only <li> elements that are immediate children of a <ul>, excluding any <li> nested more deeply, say inside a nested <ul> within one of those top-level list items — this is the key distinction from the plain descendant selector, a space, which matches at any nesting depth regardless of how many levels separate the two elements. The child combinator is specifically useful when a descendant selector would be too broad, matching unwanted deeply-nested instances, such as styling only a menu's top-level items while leaving nested submenu items unaffected by that same rule.
1Understanding Child Selectors
ul > li matches only <li> elements that are immediate children of a <ul>, excluding any <li> nested more deeply, say inside a nested <ul> within one of those top-level list items — this is the key distinction from the plain descendant selector, a space, which matches at any nesting depth regardless of how many levels separate the two elements. The child combinator is specifically useful when a descendant selector would be too broad, matching unwanted deeply-nested instances, such as styling only a menu's top-level items while leaving nested submenu items unaffected by that same rule.
Reach for the child combinator (>) instead of the plain descendant selector, a space, specifically when nested, deeper instances of the same element exist and shouldn't be affected by the same rule, like top-level menu items versus items in a nested submenu.
.menu > li {
display: inline-block;
}2Practical Example
Here is a real-world application of Child Selectors showing how it is used in production CSS code.
<ul class="menu">
<li>Home</li>
<li>Products
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>
.menu > li { font-weight: bold; }3Best Practices
Follow these guidelines when working with Child Selectors:
1. Use the child combinator when you specifically need to exclude more deeply-nested instances of the same element that a plain descendant selector would otherwise also match
2. Reach for > when styling a component with intentionally nested, recursive structure, like nested lists or nested menus, where only the top level should receive a specific style
3. Default to the plain descendant selector for the more common case where matching at any depth is actually the intended, correct behavior
Tip: Reach for the child combinator (>) instead of the plain descendant selector, a space, specifically when nested, deeper instances of the same element exist and shouldn't be affected by the same rule, like top-level menu items versus items in a nested submenu.
.menu > li {
display: inline-block;
}