Comments on: Child https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 09 Mar 2020 00:45:30 +0000 hourly 1 https://wordpress.org/?v=6.4.3 By: John https://css-tricks.com/almanac/selectors/c/child/#comment-1754940 Mon, 09 Mar 2020 00:45:30 +0000 http://css-tricks.com/?page_id=14162#comment-1754940 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 https://css-tricks.com/almanac/selectors/c/child/#comment-1752481 Sun, 10 Nov 2019 14:47:36 +0000 http://css-tricks.com/?page_id=14162#comment-1752481 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 https://css-tricks.com/almanac/selectors/c/child/#comment-1751128 Sun, 01 Sep 2019 14:50:18 +0000 http://css-tricks.com/?page_id=14162#comment-1751128 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 https://css-tricks.com/almanac/selectors/c/child/#comment-1732948 Thu, 27 Jun 2019 15:38:12 +0000 http://css-tricks.com/?page_id=14162#comment-1732948 In reply to vidya Veeramony.

THIS

]]>
By: vidya Veeramony https://css-tricks.com/almanac/selectors/c/child/#comment-1654246 Sun, 23 Dec 2018 13:01:38 +0000 http://css-tricks.com/?page_id=14162#comment-1654246 then what is the different between ol > li selector and ol li …. even space also select all li in the list

]]>
By: Chris Coyier https://css-tricks.com/almanac/selectors/c/child/#comment-1599021 Tue, 12 Jan 2016 20:52:38 +0000 http://css-tricks.com/?page_id=14162#comment-1599021 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 https://css-tricks.com/almanac/selectors/c/child/#comment-1595844 Tue, 14 Jul 2015 12:33:33 +0000 http://css-tricks.com/?page_id=14162#comment-1595844 why child selector doesn’t work in <table>?

]]>