CSS Selector > is not working

Question

I have a table whose second row ,first column contains another table. I want to set a background color to the parent table rows but it should not be applied to child table rows. For that I am trying use CSS Child-selector (>).But its not working ...Can anybody tel me the reason.

Here is my piece of code:

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
   <style>
   table.tab > tr{
     background:red;
   }
  </style>
 </head>

 <body>
  <table class="tab">
   <tr>
    <td>asdf</td><td>afda</td><td>asdfdsa</td>
   </tr>

   <tr>
    <td colspan="3">
      <table>
       <tr>
          <td>afds</td><td>Trkaladf</td><td>inner Tab</td>
       </tr>
      </table>
    </td>
   </tr>

  </table>
 </body>
</html>

Not an answer, but when adding tables to tables you are probbaly doing it wrong. I.e.: using tables for layouting. — PeeHaa, Aug 16 '12 at 11:19
Note that the doctype you are using will cause quirks mode for your page in browsers. — Alohci, Aug 16 '12 at 11:32

score 7 · Answer 1 · edited May 23 '17 at 12:00

7

I think some browsers like to auto-render a tbody element nested between table and tr which will cause your direct-child selector to not work.

table.tab > tbody > tr, table.tab > tr{
     background:red;
   }

http://jsfiddle.net/vppXL/

However, if this content is for layout and not tabular data, you should not be using a table element.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 16 '12 at 11:19

Curtis

101,612
66
270
352

You're fiddle doesnt match your answer. – PeeHaa Aug 16 '12 at 11:22
@ZoltanToth No the nested `tr` is not colored. Its parent is however, and as the nested `tr` doesn't have a color, the parent color is shown – Curtis Aug 16 '12 at 11:33
@ZoltanToth If you were to style the nested `tr`, this would apply a background color to it, and **not** override any other colour – Curtis Aug 16 '12 at 11:34
*No the nested tr is not colored. Its parent is* - that makes sense. But how does that helps the OP if he still needs a second rule to define the nested `tr` color? Why to mess with direct children `>` and `tbody` if you can just do `table.tab tr` for all, and `table.tab td tr` for nested? – Zoltan Toth Aug 16 '12 at 12:08
`table.tab > tr` is only necessary if one is worried about XHTML documents, because only in XML-serialized XHTML can a `tr` exist directly within `table`. See the comments on http://stackoverflow.com/a/5568877/106224 – BoltClock Aug 16 '12 at 19:19

score 2 · Answer 2 · answered Aug 16 '12 at 11:24

Best thing to do is set your <thead> and <tbody> sections yourself, like so:

<table class="tab">
    <thead>
        <tr>
            <td>asdf</td>
            <td>afda</td>
            <td>asdfdsa</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">
                <table>
                    <tr>
                        <td>afds</td>
                        <td>Trkaladf</td>
                        <td>inner Tab</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Then you can choose set your markup to target rows in your tbody, but not thead:

table.tab tbody {
    background: red;
}

However, it's better to set your background-color on your <td> elements instead with:

table.tab > tbody > tr > td {
    background: red;
}

There's a jsFiddle example here.

score 1 · Accepted Answer · answered Aug 16 '12 at 11:33

table.tab > tbody > tr indeed gives the style to only the first row. If you take a look at the DOM with firebug, you can confirm it. The first row of the child table doesn't get styled the same way.

However, since your child table is inside a table row that has a red background, and the child table has no background specified, the child table will have no background - and thus you still see the red background "through" the child table.

Possible solution - styling the child table as well with a different background:

table.tab > tbody >  tr {
 background:red;
}

table.tab table > tbody > tr{
 background:white;
}

CSS Selector > is not working

3 Answers3