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. prakash
    Permalink to comment#

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

    • 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!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.