行の最初と最後のTDを選択する方法は？

TD行の最初と最後をどのように選択できますか？

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

:first-childおよび:last-child疑似セレクターを使用できます。

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

これはすべての主要なブラウザで機能するはずですが、要素が動的に追加されるとIE7にはいくつかの問題があります（IE6では機能しません）。

次のスニペットを使用できます。

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

次の疑似クラスを使用します。

：first-child は、「この要素が親の最初の子である場合にこの要素を選択する」ことを意味します。

：last-childは、「この要素が親の最後の子である場合にこの要素を選択する」ことを意味します。

要素ノード（HTMLタグ）のみが影響を受け、これらの疑似クラスはテキストノードを無視します。

あなたは使用することができます最初の子：と：最後の子を pseudo-selectors：

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

または、次のような他の方法を使用できます

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

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

どちらも完全に機能しています

sass（s​​css）を使用する場合は、次のスニペットを使用できます。

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

行に先頭（または末尾）が含まれている場合 thタグtd、:first-of-typeおよび:last-of-typeセレクターを使用する必要があります。それ以外の場合、td行の最初の要素でない場合、最初の要素は選択されません。

これは与える：

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