Cómo seleccionar no el primer pa y no última td

Question

CSS

#MyTable tr+tr:hover { 
     background: #dfdfdf; 
} 

HTML

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

me las arreglé para asomar la fila 2 y 3, pero mientras la libración los días 2 y 3, cómo puedo omitir el td (X). Preferible no usar el selector jQuery.

Answer 1

Utilice :not(), :first-child y :last-child.

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

Ver también this example.

Answer 2

Si no desea aplicar algo al primer y último hijo, puede usar los selectores :first-child y :last-child para anular los estilos.

#MyTable tr, tr:hover { 
    background: #dfdfdf; 
} 

#MyTable tr:first-child, tr:last-child { 
    background: #000; 
} 

Esto no funcionará en IE hasta IE 9 though.

Unless you shim in some support.

Answer 3

:not(:first-child) y :not(:last-child) deberían hacer el truco, parece que son compatibles con todos los últimos navegadores. Si necesita IE 9 < apoyo que puede agregar clases, o reemplazar td 's con th' s

Answer 4

encontré este enlace SO porque yo no quería que mi fila de encabezado para resaltar cuando se cernió sobre ella. La solución que se me ocurrió fue usar etiquetas <thead> y <tbody> y aplicar css a las filas dentro de <tbody>.

<style> 
    .report tbody tr:hover { 
     background-color: khaki; 
    } 
</style> 

<table class="report"> 
    <thead> 
     <tr> 
      <th>Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Value</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td>Total</td> 
     </tr> 
    </tfoot> 
</table>