HTML & CSS
Article
By Adam Roberts

Child Selector (CSS selector)

By Adam Roberts
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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:

--ADVERTISEMENT--

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.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?