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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

Вы можете использовать : первый ребенок и : последний ребенок 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;
}

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

Answer 4

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

Это дает:

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