Arka arkaya ilk ve son TD nasıl seçilir?

TDArka arkaya ilk ve sonuncuyu nasıl seçersiniz ?

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

Sen kullanabilirsiniz :first-childve :last-childsözde seçicileri:

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

Bu, tüm büyük tarayıcılarda çalışmalıdır, ancak öğeler dinamik olarak eklendiğinde IE7'de bazı sorunlar vardır (ve IE6'da çalışmaz).

Aşağıdaki snippet'i kullanabilirsiniz:

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

Aşağıdaki sözde sınıfları kullanma:

: first-child " ebeveyninin ilk çocuğuysa bu öğeyi seç" anlamına gelir .

: last-child " üst öğesinin son çocuğu ise bu öğeyi seç" anlamına gelir .

Yalnızca öğe düğümleri (HTML etiketleri) etkilenir, bu sözde sınıflar metin düğümlerini yok sayar.

Şunları kullanabilirsiniz : ilk çocuk ve : son çocuk pseudo-selectors :

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

Veya şu şekilde kullanabilirsiniz:

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

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

Her iki yol da mükemmel çalışıyor

Sass (scss) kullanıyorsanız aşağıdaki snippet'i kullanabilirsiniz:

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

Satır thöncesinde bazı önde gelen (veya sondaki) etiketler içeriyorsa td, :first-of-typeve :last-of-typeseçicilerini kullanmalısınız. Aksi takdirde, tdsatırın ilk öğesi değilse ilk seçilmez.

Bu şunu verir:

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