Child Selector (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

E>F {
declaration block
}

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.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full

In Internet Explorer 7, this selector fails if a comment appears between the combinator and the simple selector that follows it.

If the first in sequence of the simple selectors is missing, Internet Explorer 7 acts as if there were a universal selector in its place, instead of failing as it should. The exact trigger for the bug is when the child selector is the first character in an external style sheet, or when it is the first character in an internal style element. There must be no preceding whitespace in either external or internal style sheets for this bug to be triggered. In an internal style sheet the selector must also be on the same line as the opening style tag as follows or the bug is not triggered:
<style type="text/css" media="all">> p {color:red;}</style>

User-contributed notes

Related Products