Come selezionare il primo e l'ultimo TD di fila?

Question

Come si può selezionare il primo e l'ultimo TD di fila?

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

Answer 1

è possibile utilizzare la :first-child e :last-child pseudo-selettori:

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

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

Answer 2

È possibile utilizzare il seguente frammento:

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

usando le seguenti classi pseudo:

: first-child significa "selezionare questo elemento se si tratta del primo bambino del suo genitore ".

: last-child significa "selezionare questo elemento se è l'ultima bambino del suo genitore".

Solo nodi elemento (tag HTML) sono interessati, questi pseudo-classi ignorano i nodi di testo.

Answer 3

È possibile utilizzare il : first-child e : last-childpseudo-selectors:

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

Oppure si può usare 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 modo perfettamente funzionante

Answer 4

Se la riga contiene alcune leader (o finale) th tag prima del td m è necessario utilizzare il :first-of-type ei :last-of-type selettori. In caso contrario, il primo td non verrà selezionato se non è il primo elemento della riga.

Questo dà:

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