Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

Child Selector (CSS selector)

Browser support full matrix
IE7+ FF1+ Saf1.3+ Op9.2+
Buggy Full Full Full
Spec
Version
CSS2

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.

Try it yourself!View all demos

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.

Compatibility

IE5.5None
6.0None
7.0Buggy
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

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:
#1
Date:
Sat, 05 Apr 2008 17:31:58 GMT
Contributed by:
andesyne
Status:
This note has not yet been confirmed for accuracy and relevance.

The second list item is incomplete. I love Sitepoint and both of these reference indexes. Looking forward to Javascript.

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

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters