HTML & CSS reference

A > B

The child combinator: selects elements B that are direct children of A.

Syntax

A > B { … }

Examples

The nested list keeps its own color:

<style>
  .list > li { color: crimson; }
</style>
 
<ul class="list">
  <li>Direct child</li>
  <li>Direct child
    <ul><li>Nested item stays black</li></ul>
  </li>
</ul>

Notes

Use > when the same element can appear at several levels, as in nested menus. If the depth does not matter, the plain descendant combinator A B is enough.

In the tutorial

Selectors — How to pick elements for styling — by tag, class, id, nesting and attribute.

Thanks for reading!