¿Cómo seleccionar el primer y el último TD seguidos?

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

tr > td[0],
tr > td[-1] {
/* styles */
}
Author: BoltClock, 2011-08-29
Source

4 answers

Puedes usar los pseudo-selectores :first-child y :last-child: 

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

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

 321
Author: James Allardice,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-29 10:18:59

Puede usar el siguiente fragmento: 

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

Usando las siguientes pseudo clases:

:first-child significa "seleccione este elemento si es el first child de su padre".

:last-child significa "seleccione este elemento si es el last child de su padre".

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

 17
Author: Francesco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-20 15:21:29

Usted podría utilizar la :primer niño y :el niño pseudo-selectors:

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

O puedes 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;
}

Ambos caminos funcionan perfectamente

 9
Author: Ajay Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-04 11:45:03

Si la fila contiene algunas etiquetas iniciales (o finales) th antes de la tdm, 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 */
}
 1
Author: Christopher Chiche,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-15 14:55:37