A > B
The > sign selects B elements that are direct children of element A, meaning they sit exactly one level below it.
Example
#.menu > li {
margin-bottom: 6px;
font-weight: 700;
color: #fff;
}
.menu ul {
margin: 4px 0 0;
font-weight: 400;
color: #a1a1aa;
}<ul class="menu stage" style="margin: 0; padding: 12px 12px 12px 30px;">
<li>Courses
<ul>
<li>HTML and CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Documentation</li>
</ul>Definition and usage
#The child combinator > narrows the descendant combinator down to a single level. The notation .menu > li selects only the items whose parent is the .menu element. It skips the items of a nested submenu, because their parent is a different list.
It’s a good choice when components nest inside each other. The rule .card > p won’t affect paragraphs in another card embedded inside, and .grid > * will only touch the grid’s items, not their contents.
The > sign itself carries no weight, specificity is counted the same way as with a space. The whitespace around it is optional: ul>li and ul > li work identically, though the second notation is easier to read.
Keep in mind that the browser can add elements to the tree on its own. In a table written without <tbody>, the rows still end up inside an automatically created <tbody>, so table > tr won’t work, but table > tbody > tr will.
Syntax
#A > B { property: value; }Example selectors
#- Only the
spanthat sits directly in the box. The grandchild and great-grandchild have a different parent. - Every
spanwhose parent is.lvl. Both the grandchild and the great-grandchild have this setup. - Two combinators mark out an exact path: a
spanin a.lvlthat itself sits directly in the box. Only the grandchild matches. - Every direct child of the box, regardless of type: the
spanand the firstdiv.lvltogether with its contents.
Example selectors in practice
#.demo > span
span that sits directly in the box. The grandchild and great-grandchild have a different parent..demo > span { background: #7c3aed; color: #fff; }.lvl > span
span whose parent is .lvl. Both the grandchild and the great-grandchild have this setup..lvl > span { background: #7c3aed; color: #fff; }.demo > .lvl > span
span in a .lvl that itself sits directly in the box. Only the grandchild matches..demo > .lvl > span { background: #7c3aed; color: #fff; }.demo > *
span and the first div.lvl together with its contents..demo > * { background: #7c3aed; color: #fff; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Use
>in components that can nest, such as menus, cards, or comment lists. The style won’t leak inside. - The pair
.container > *is a convenient way to style every item of a flex or grid layout without reaching into its contents.
Related entries
#- A BA space between selectors selects B elements anywhere inside element A, at any depth.
- A + BThe + sign selects element B that sits directly after element A and shares the same parent.
- A ~ BThe ~ sign selects every B element that comes anywhere after element A and shares the same parent.
- *The asterisk matches every element. Used for style resets and rules that target all the children of a chosen container.
- :first-childMatches an element that is the first child of its parent.
- :has()Selects an element based on what it contains or what follows it. Lets you style a parent according to its children.
Spotted a mistake or missing an example? Write to us.