CSS Child Selector

The child selector uses a > between two selectors. It matches elements that are direct children only: one level down, not deeper.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style>
  .menu > li {
    background: #fdebd9;
    border-left: 4px solid #d94a00;
    padding: 4px 10px;
    margin-bottom: 4px;
  }
</style>
<ul class="menu">
  <li>Books
    <ul>
      <li>Fiction</li>
      <li>Poetry</li>
    </ul>
  </li>
  <li>Stationery</li>
</ul>

“Books” and “Stationery” get the tinted background and orange bar because they are direct children of .menu. “Fiction” and “Poetry” are children of the inner list, so the rule skips them.

The example uses a background and a border on purpose. A property such as color or font-weight is inherited, so the inner items would look styled too, even though the rule did not match them. Inheritance is covered in CSS Inheritance.

Child or descendant?

Use the child selector when you want to style one level of a nested structure, such as the top level of a menu, without leaking into the levels below. Compare it with CSS Descendant Selector.

1

.menu ul > li { font-style: italic; }