Css – How to select not first tr and not last td

csscss-selectors

#MyTable tr+tr:hover {
  background: #dfdfdf;
}
<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>

I managed to hover row 2 and 3 but while hover on 2 and 3, how can I skip the td (X). Preferable not using jQuery selector.

Best Answer

Use the :not(), :first-child and :last-child.

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

Also see this example.