Child Selector (CSS selector)

Tweet

Description

This selector matches all elements that are the immediate children of a specified element. The combinator in a child selector is a greater-than sign (>). It may be surrounded by whitespace characters, but if it is, Internet Explorer 5 on Windows will incorrectly treat it as a descendant selector. So the best practice is to eschew whitespace around this combinator.

Consider this HTML fragment:

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

Let’s try to match elements in the above fragment with the selector below:

ul>li {
  ⋮ declarations
}

The child selector above will only match the two li elements that are children of the ul element. It will not match the subitems, because their parent is the ol element.

Example

Here’s an example of the child selector at work:

ul>li {
  ⋮ declarations
}

This selector matches all li elements that are the immediate children of a ul element—that is, all li elements that have a ul element as a parent.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments