Child | CSS-Tricks

Sara Cope on Sep 6, 2011 (Updated on Jan 12, 2016)

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

prakash

# July 14, 2015

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

Chris Coyier

Permalink to comment# January 12, 2016
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!

vidya Veeramony

# December 23, 2018

then what is the different between ol > li selector and ol li …. even space also select all li in the list

texxs

Permalink to comment# June 27, 2019

THIS

Jass

# September 1, 2019

ol > li:

ol > li {
    background-color: green;
}

will result in:

<ol>
    <li>Green.</li>
    <li>Green.</li>
    <ul>
        <li>Not Selected.</li>
        <li>Not Selected.</li>
    </ul>
    <li>Green.</li>
</ol>

, while ol li:

ol li {
    background-color: green;
}

<ol>
    <li>Green.</li>
    <li>Green.</li>
    <ul>
        <li>Green.</li>
        <li>Green.</li>
    </ul>
    <li>Green.</li>
</ol>

csengh

# November 10, 2019

You say: “select elements that are direct descendants only”.
For me this means: it only looks one level down, no deeper, but unfortunately this don’t works for me:

div > p {
            color: red
}

<div>
        this will match

            <div>this will NOT match
                <p>this will match
            </div>

                <p>Oops. this is thre levels deep so WHY Match?
            </p>
            Oops. this is two levels deep so WHY Match?
        </p>
    </div>

What’s wrong with it, please help

John

# March 8, 2020

Hi, I wonder if anyone can help me better understand this. I have the following CSS which works perfectly fine in that the html is actually displayed as a table. Obviously a few lines are omitted to save space here.

div.tableRow > p, div.tableRow > label, div.tableRow > input {
display: table-cell;
vertical-align: top;
padding: 3px;
}

If i change the CSS selectors to this, it doesn’t apply the styling anymore:

div.tableRow p, div.tableRow label, div.tableRow input {
display: table-cell;
vertical-align: top;
padding: 3px;
}

So far my understanding is that if you use a selector without a > symbol ( eg. div.tableRow p ), then all p descendants of div.tableRow will be selected so why would my table display style be lost if i remove the “>” ?
I’m sure it’s something i’m not quite understanding so any help will be appreciated.

More Information

Also Known As…

Browser Support

Comments

Leave a Reply Cancel reply