How to select not first tr and not last td

Question

#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.

Answer 1

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

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

Also see this example.