CSS3 Selectors: Using first-child to format table header

This entry is part 25 of 40 in the series CSS3 Selectors

It is common for us to use first-child to format the first row or the table header of a html table.

This is done by using selector tr:first-child.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
    <style>
        tr:first-child {
            background: gray;
            color: white;
        }
    </style>
</head>
<body>
<table border='1'>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
        <th>year</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
        <td>1973</td>
    </tr>
    <tr>
        <td>2</td>
        <td>New Order</td>
        <td>Substance</td>
        <td>1987</td>
    </tr>
</table>
</body>
</html>

Series Navigation<< CSS3 Selectors: Structural pseudo-class :first-child
CSS3 Selectors: Last-child >>