CSS: Changing color on text in specifc column - but not on that column header?

Question

I have the following HTML table:

<div class="table">
            <table id="carTable">
                <tbody>
                <tr>
                    <th>Car Number</th>
                    <th>owner</th>
                </tr>
                <!-- {{#each car}} -->
                <tr>
                    <td>{{carNumber}}</td>
                    <td>{{owner}}</td>
                </tr>
                <!--{{/each}} -->
                </tbody>
            </table>
        </div>

And associated CSS that changes colour of text in first column:

#carTable tr>:nth-child(1){
        font-weight: bold;
        color: #2d89ac;
    }

The problem is that this is also changing the color on the table header of that column.

How can I stop it doing so?

Answer 1

You can use the :not() rule in css:

#carTable tr>:nth-child(1):not(th) {
  font-weight: bold;
  color: #2d89ac;
}

<div class="table">
  <table id="carTable">
    <tbody>
      <tr>
        <th>Car Number</th>
        <th>owner</th>
      </tr>
      <!-- {{#each car}} -->
      <tr>
        <td>{{carNumber}}</td>
        <td>{{owner}}</td>
      </tr>
      <!--{{/each}} -->
    </tbody>
  </table>
</div>