CSS: Way to designate first row of a table?

[chopin2256]

Hi,

Is there a way to manipulate the first row of this table code using CSS without editing this html code:

<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

I was able to manipulate the first row of this table by changing the table code, and using this CSS code along with it:

HTML:
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

CSS:
#pink th
{
background-color: #B17D63;
color: rgb(222, 184, 135);
}

However, I would like to just do this without editing the table html code to save time when I add tables through frontpage. Is this possible, and if so, how can I accomplish this? Thanks.

[createErrorMsg]

Unfortunately, there is no reliable, cross-browser way to apply CSS styles to the first child element of another element. Which is to say that CSS does allow for this, but certaIn browsErs do not support it.

The best way to accomplish this is to do what your code points toward: add an ID or a CLASS name to the table row in each table. If you will be adding more such tables to the page or site through your WYSIWYG editor, use a class rather than an id, as it can be applied to as many elements on a single page as necessary. It's a little bit of a pain to have to add that class each time, but it's both reliable, and currently the only option.

html:
<table>
<tr class="first_row">
<td></td>
<td></td>
</tr>
etc...

css:
.first_row{
/*styles for first row of table*/
}

cEM

[Robin_reala]

For future reference the correct (i.e. doesn't work in IE) way to do this in CSS would be:

tr:first-child {
 background-color: #B17D63;
 color: rgb(222, 184, 135);
}