Стиля только первый тр в таблице, без вложенных таблиц

Question

Это пример:

http://jsfiddle.net/Bq3AU/

Я хочу вложенную таблицу Tr: первый ребенок не быть красными.

Я знаю, что я могу использовать такой код:

table.calc table tr { 
    backgorund:none; 
} 

Но это только для одной вложенной таблицы. Я хочу написать правило css, которое окрашивает только родительскую таблицу, чтобы быть красным.

Я думаю, что это что-то с знаком «>», как table.calc> tr или что-то, но у меня всегда были проблемы с '>'.

Answer 1

Я думаю, что вы не можете использовать другой класс CSS для chiltable же, что:

<table class="calc1"> 
<tr><td>title</td><td>title2</td></tr> 
<tr> 
    <td> 
     <table class = "calc2"> 
      <tr><td>text</td><td>text</td></tr> 
      <tr><td>text</td><td>text</td></tr> 
     </table> 
    </td> 
    <td> 
     text 
    </td> 
</tr> 
<table> 

CSS:

.calc1 tr:first-child { 
background:red; 
} 

table td { 
border:1px solid #000; 
padding:10px; 
} 
.calc2 tr:first-child { 
background:blue; 
} 

Answer 2

Я думаю, что это то, что вы хотите, если не поясните. Я использую белый цвет в качестве общего цвета фона, вы можете выбрать другое:

<style> 
/*make all tables white */ 
table{ 
background:white; 
} 
/*make all first child tr's red*/ 
table tr:first-child{ 
background:red; 
} 
/*make all first child tr's that are part of child tables (not parents) white*/ 
table tr td table tr:first-child{ 
background:white; 
} 
/*so now only first child tr's of the top parent tables are red*/ 
</style>