Child

A child combinator in CSS is the "greater than" symbol, it looks like this:

ol > li {
  color: red;
}

It means "select elements that are direct descendants only". In this case: "select list items that are direct descendants of an ordered list". To illustrate:

<ol>
  <li>WILL be selected</li>
  <li>WILL be selected</li>
  <ul>
     <li>Will NOT be selected</li>
     <li>Will NOT be selected</li>
  </ul>
  <li>WILL be selected</li>
</ol>

Try removing the > symbol when playing around with the demo below:

See the Pen f149edb15c53d157a7009b816ee919d2 by CSS-Tricks (@css-tricks) on CodePen.

More Information

Also Known As...

The child combinator is what the spec calls it, but you'll also hear it called:

  • child selector
  • direct descendent selector
  • direct descendant combinator

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any 7+ Any Any

Comments

  1. User Avatar
    prakash
    Permalink to comment#

    why child selector doesn’t work in <table>?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I have a guess!

      If you’re writing HTML like

      <table>
        <tr>
          <td>thing</td>
        </tr>
      </table>
      

      and you write a selector like:

      table > tr > td {
        color: red;
      }
      

      that won’t work, because in the rendered DOM, it will really be like:

      <table>
        <TBODY>
        <tr>
          <td>thing</td>
        </tr>
        </TBODY>
      </table>
      

      Because <tbody> is a required part of the table markup and the browser will just stick it in there if you don’t. That DOM structure means that the <tr> isn’t a child of the <table> anymore!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag