0

I can't figure out why I can't achieve selecting rows that are direct children of a table (given that other sub-table are included in TD's of main table, I just want direct children rows, not rows of descendant tables).

Here the remaining structure after radical simplification (also see jsfiddle here): 

<body>
    <table>
        <tr>
            <td>TR 1 - TD 1 </td>
            <td>TR 1 - TD 2 </td>
        </tr>
        <tr>
            <td>TR 2 - TD 1</td>
            <td>
                <table>
                    <tr>
                        <td>Table 2 - A </td>
                        <td>Table 2 - B </td>
                    </tr>
                    <tr>
                        <td>Table 2 - C</td>
                        <td>Table 2 - D</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

I'm not able to select rows that are direct children of the main table:
- body>table tr {background-color:lightgray;} logically selects all rows of table and sub-table - body>table tr tr {color:blue;} logically selects all rows of sub-table only
- but body>table>tr {color:red;} doesn't select anything at all (no red text to be seen)

What am I doing wrong? On the structure? On the selectors?
->jsfiddle

fpierrat
  • 739
  • 7
  • 25
  • 1
    Check in console and see if `` is being inserted by the browser. – Harry Jan 09 '15 at 11:11
  • 1
    I had checked the structure through the "view source" in Firefox, didn't think the console would show me more... I'll remember this, thanks. – fpierrat Jan 09 '15 at 11:33

1 Answers1

2

a tbody element may be automatically inserted when it is not in the markup (the side effect is that a table > tr selector could fail), so try to change last rule with body > table > tbody tr.

example: http://jsfiddle.net/wn84hotm/2/

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Actually it doesn't really work as I'd expect: `body > table > tbody > tr` gets selected, but the css properties also apply to TRs in sub-table (to anything descendant of TR in fact: http://jsfiddle.net/wn84hotm/4/) -that's probably why it's called "cascaded"... I would have liked ONLY direct TR-children to be affected. – fpierrat Jan 09 '15 at 11:29
  • Sorry, it DOES work on my server. Just not on jsfiddle. Many thanks. – fpierrat Jan 09 '15 at 11:30