Как выбрать первый и последний TD в строке?

Ответ 1

Вы можете использовать псевдоселектора :first-child и :last-child:

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

Это должно работать во всех основных браузерах, но IE7 имеет некоторые проблемы, когда элементы добавляются динамически (и он не будет работать в IE6).

Ответ 2

Вы можете использовать следующий фрагмент:

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

Используя следующие псевдо классы:

: first-child означает "выберите этот элемент, если он является первым потомком его родителя".

: last-child означает "выберите этот элемент, если он является последним дочерним элементом его родителя".

Уязвимы только узлы элементов (теги HTML), эти псевдоклассы игнорируют текстовые узлы.

Ответ 3

Вы можете использовать : first-child и : last-child 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;
}

Оба способа отлично работают

Ответ 4

Если строка содержит некоторые ведущие (или конечные) теги th перед td m, вы должны использовать селектора :first-of-type и :last-of-type. В противном случае первый td не будет выбран, если это не первый элемент строки.

Это дает:

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

Ответ 5

Если вы используете sass (scss), вы можете использовать следующий фрагмент:

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