Comments on: Child

By: John

John — Mon, 09 Mar 2020 00:45:30 +0000

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.

By: csengh

csengh — Sun, 10 Nov 2019 14:47:36 +0000

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

By: Jass

Jass — Sun, 01 Sep 2019 14:50:18 +0000

In reply to vidya Veeramony. 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;
}

will result in:

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

By: texxs

texxs — Thu, 27 Jun 2019 15:38:12 +0000

In reply to vidya Veeramony. THIS

By: vidya Veeramony

vidya Veeramony — Sun, 23 Dec 2018 13:01:38 +0000

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

By: Chris Coyier

Chris Coyier — Tue, 12 Jan 2016 20:52:38 +0000

In reply to prakash. 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!

By: prakash

prakash — Tue, 14 Jul 2015 12:33:33 +0000

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