Bagaimana cara memilih TD ​​pertama dan terakhir berturut-turut?

Bagaimana Anda bisa memilih yang pertama dan yang terakhir TDberturut-turut?

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

Anda dapat menggunakan :first-childdan :last-childpseudo-selektor:

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

Ini harus bekerja di semua browser utama, tetapi IE7 memiliki beberapa masalah ketika elemen ditambahkan secara dinamis (dan itu tidak akan berfungsi di IE6).

Anda dapat menggunakan cuplikan berikut:

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

Menggunakan kelas pseudo berikut:

: first-child berarti "pilih elemen ini jika itu adalah anak pertama dari induknya".

: last-child berarti "pilih elemen ini jika itu adalah anak terakhir dari induknya".

Hanya elemen node (tag HTML) yang terpengaruh, kelas pseudo ini mengabaikan node teks.

Anda dapat menggunakan : anak pertama dan : anak terakhir pseudo-selectors :

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

Atau Anda bisa menggunakan cara lain seperti

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

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

Keduanya bekerja dengan sempurna

Jika Anda menggunakan sass (scss) Anda dapat menggunakan potongan berikut:

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

Jika baris berisi beberapa thtag yang mengarah (atau tertinggal) sebelum tdAnda harus menggunakan :first-of-typedan :last-of-typepenyeleksi. Kalau tidak, yang pertama tdtidak akan dipilih jika itu bukan elemen pertama dari baris.

Ini memberi:

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