CSS Child Combinator (>) not working

Question

For a website I am creating I need to have nested HTML tables. I have styling for the first outside table row (header) that I don't want to be applied for the first rows of the inside tables so I tried using the child combinator like so:

 table.outside > tr:first-child {
      # Outside table header row styles
 }

However, the style do not get applied to the header row of the outside table but when I remove the child combinator it works.
Here is my HTML:

 <table class="outside">
      <tr><!-- This should be styled -->
           <th>Column 1</th>
           <th>Column 2</th>
      </tr>
      <tr>
           <td>
                <table>
                     <tr><!-- Table Data --></tr><!-- This should not be styled -->
                     <tr><!-- Table Data --></tr>
                </table>
           </td>
      </tr>
      <!-- Etc. -->
 </table>

What am I doing wrong?

Browsers will usually add a `` tag if you don't. Try `table.outside > tbody > tr:first-child` — gen_Eric, Feb 27 '14 at 21:25

score 4 · Accepted Answer · answered Feb 27 '14 at 21:28

4

You can try this selector table.outside > tbody > tr:first-childbut if you share your code, my help would be better.

answered Feb 27 '14 at 21:28

amatellanes

3,645
2
17
19

Code shared, sorry about that – 1000000000 Feb 27 '14 at 21:34
Confirmed: http://jsfiddle.net/QnzkG/5/ – Kevin Panko Feb 28 '14 at 20:20

CSS Child Combinator (>) not working

1 Answers1