Como selecionar o primeiro e o último TD seguidos?

Como você pode selecionar o primeiro e o último TDem uma linha?

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

Você pode usar o :first-childe :last-childpseudo-seletores:

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

Isso deve funcionar em todos os principais navegadores, mas o IE7 tem alguns problemas quando elementos são adicionados dinamicamente (e não funcionará no IE6).

Você pode usar o seguinte snippet:

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

Usando as seguintes pseudo classes:

: primeiro filho significa "selecione este elemento se for o primeiro filho de seu pai".

: last-child significa "selecione este elemento se for o último filho de seu pai".

Somente nós de elemento (tags HTML) são afetados, essas pseudo-classes ignoram os nós de texto.

Você pode usar o : primeiro filho e : último filho pseudo-selectors :

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

Ou você pode usar outra maneira como

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

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

Os dois lados estão funcionando perfeitamente

Se você usar sass (scss), poderá usar o seguinte trecho:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

Se a linha contiver algumas thtags iniciais (ou à direita) antes de tdvocê usar :first-of-typeos :last-of-typeseletores e. Caso contrário, o primeiro tdnão será selecionado se não for o primeiro elemento da linha.

Isto dá:

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