Skip to: content, navigation

Child Selector (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE7+ FF1+ SA1.3+ OP9.2+
Buggy 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
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
None None Buggy 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 one 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.

User-contributed notes

ID:
#3
Contributed:
by irajab
Date:
Wed, 02 Jul 2008 16:01:49 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

The second BUG (If one of the simple selectors is missing...) doesn't triggered all the time. To trigger the BUG the rule must be the first rule in the stylesheet and must not be preceded by any other rule or whitespace or it will be failed as it should be.
When This happened (BUG) IE7 will assume/treat the first simple selector IS a universal selector.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search