¿Cómo seleccionar el primer TD y el último en una fila?

Question

¿Cómo se puede seleccionar el primero y el último TD en una fila?

tr > td[0], 
tr > td[-1] { 
/* styles */ 
} 

Answer 1

podría utilizar el :first-child y :last-child pseudo-selectores:

tr td:first-child, 
tr td:last-child { 
    /* styles */ 
} 

Esto debería funcionar en todos los navegadores, pero IE7 tiene algunos problemas cuando se agregan elementos de forma dinámica (y no va a funcionar en IE6).

Answer 2

Se puede utilizar el siguiente fragmento:

tr td:first-child {text-decoration: underline;} 
    tr td:last-child {color: red;} 

El uso de las siguientes clases seudo:

: first-child significa "seleccionar este elemento si es el primer hijo de su padre ".

: last-child significa "seleccionar este elemento si es el último hijo de su padre".

Solo los nodos de elementos (etiquetas HTML) se ven afectados, estas pseudo-clases ignoran los nodos de texto.

Answer 3

Se podría utilizar el : first-child y : last-childpseudo-selectors:

tr td:first-child{ 
    color:red; 
} 
tr td:last-child { 
    color:green 
} 

O puede usar otra forma como

// To first child 
tr td:nth-child(1){ 
    color:red; 
} 

// To last child 
tr td:nth-last-child(1){ 
    color:green; 
} 

De cualquier manera están perfectamente trabajando

Answer 4

Si la fila contiene alguna parte delantera (o posterior) th etiquetas antes de td m, debe usar los selectores :first-of-type y :last-of-type. De lo contrario, el primer td no se seleccionará si no es el primer elemento de la fila.

Esto da:

td:first-of-type, td:last-of-type { 
    /* styles */ 
}