Child combinator (>)

CSS course · Beginner · Lesson 12/82

Learn the > child combinator.

Child combinator: >

In CSS, the > sign forms a child combinator. It is written between two selectors and targets elements that are direct children of the element on the left.

nav > a matches only a tags that sit directly inside a nav. If another tag sits between them, the match fails. This sharp behavior is handy for menus and lists.

Only one level deep

The child combinator limits the depth. When you write ul > li, only li tags that are direct children of a ul are picked. Items nested at a deeper level stay untouched.

This is the key behavior: use the child combinator when sub-menu items should not be styled. To reach every level, switch to the space combinator — next lesson.

Exercise Color the menu links

Write a nav > a selector and add color: navy inside. Only the top-level menu links turn navy; sub-menu links stay as they were.

Show example solution

/* color the menu links */
nav > a {
  color: navy;
}

Test yourself

Which structure does nav > a match?
```
nav > a {
  color: navy;
}
```
- <nav><ul><a>Link</a></ul></nav>
- <nav><a>Link</a></nav>
- <nav><p><a>Link</a></p></nav>
- <nav><span>Text</span></nav>
Show answer

<nav><a>Link</a></nav> — Correct. nav > a matches only the a tag that is a direct child of nav.

Select nav's direct a child

____ {
  color: navy;
}

Show answer

nav > a {
  color: navy;
}

Match each combinator to its target

nav > a

Top-level menu link
ul > li

First-level list item
section > h2

Section's own heading
article > p

Article's direct paragraph

Child combinator (>)