I want a different color only for first row of a html table

Question

I used a table. I applied CSS ID table-4.

Following the html code:

<table border='0' width='100%' id='table-4'>
   <tr><td>Date</td><td>Headline</td></tr>
   <tr><td>29 DEC</td><td>Dead</td></tr>
   <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
</table>

Here is the style.css:

#table-4 { background-color: #F2F2F2;}

So the whole table's background color is #F2F2F2, but I want a different color for the first row where Date and Headline goes, so how could I modify my CSS for this thing?

Answer 1

You can use :first-child for this. Write like this:

#table-4 tr:first-child{
    background:red;
}

Check this http://jsfiddle.net/cbK8J/