Style only first tr in table, without nested tables - html

Question

This is an example:
http://jsfiddle.net/Bq3AU/
I want nested table tr:first-child not to be red.
I know that I can use a code like:
table.calc table tr {
backgorund:none;
}
But this is only for one nested table. I want to write a css rule that colour only parent table row to be red.
I think it is something with '>' sign like table.calc > tr or something but I always had problems with '>'.

Answer 1

I think you cant use another class CSS for chiltable same that:
<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

I think this is what you want, if not please clarify. I use white as a generic background color, you might choose another:
<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>