HTML table how highlight row on hover except first column?

Question

Simple table:

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

What I like:

Answer 1

Use :not and :first-child to exclude the first cell like so:

#myTable tr:hover td:not(:first-child){
    background: #ddd;
}

Demo:

#myTable {
  border-collapse: collapse;
}

#myTable td {
  width: 100px;
  border: 1px solid black;
}

#myTable tr:hover td:not(:first-child) {
  background: #ddd;
}

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>