Child Selector (CSS selector)
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.
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
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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:
- #1
- Date:
- Sat, 05 Apr 2008 17:31:58 GMT
- 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.

