Come selezionare il primo e l'ultimo TD consecutivo?

Come puoi selezionare il primo e l'ultimo TDdi fila?

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

È possibile utilizzare l' :first-childe :last-childpseudo-selettori:

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

Questo dovrebbe funzionare in tutti i principali browser, ma IE7 ha alcuni problemi quando gli elementi vengono aggiunti in modo dinamico (e non funzionerà in IE6).

Puoi utilizzare il seguente frammento:

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

Utilizzando le seguenti pseudo classi:

: first-child significa "seleziona questo elemento se è il primo figlio del suo genitore".

: last-child significa "seleziona questo elemento se è l' ultimo figlio del suo genitore".

Sono interessati solo i nodi elemento (tag HTML), queste pseudo-classi ignorano i nodi di testo.

È possibile utilizzare : first-child e : last-child pseudo-selectors :

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

Oppure puoi usare un altro modo come

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

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

Entrambi i modi funzionano perfettamente

Se usi sass (scss) puoi usare il seguente frammento:

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

Se la riga contiene alcuni thtag iniziali (o finali) prima tddi utilizzare :first-of-typei :last-of-typeselettori e. Altrimenti il ​​primo tdnon verrà selezionato se non è il primo elemento della riga.

Questo da:

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