HTML Element Style How to - Color differently only for 1st row of a html table








Question

We would like to know how to color differently only for 1st row of a html table.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#table-4 tr:first-child {<!--   w  w  w .j  a v  a  2s .c  o  m-->
  background: red;
}
</style>
</head>
<body>
  <table border='0' width='100%' id='table-4'>
    <tr>
      <td>Date</td>
      <td>Headline</td>
    </tr>
    <tr>
      <td>29 DEC</td>
      <td>Live</td>
    </tr>
    <tr>
      <td>30 DEC</td>
      <td>Hit</td>
    </tr>
    <tr>
      <td>02 JAN</td>
      <td>Leg</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: