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

170

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

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

css css-selectors clarkk
источник

377

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

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

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

Джеймс Аллардис
источник

а что если вы хотите выбрать второго или третьего ребенка?

Кларк

2

а какая разница между tr > tdа tr td?

Кларк

Следующее правило устанавливает стиль всех элементов P, которые являются потомками BODY: body> P {line-height: 1.3} Вы можете увидеть по адресу: w3.org/TR/CSS2/selector.html#child-selectors (опубликована та же страница) Джеймсом)

Франческо

4

@clarkk - >выбирает только прямых детей. Без этого будут выбраны все потомки (например, дети детей). Чтобы выбрать второго или третьего ребенка, загляните в nth-childпсевдоселектор.

Джеймс Аллардис

@BoltClock Я когда-то видел ваше решение этой проблемы с помощью +. что-то вроде, tr td + td + .... +td но что, если я не знаю, сколько у меня тд?

Рой Намир

19

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

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

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

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

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

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

Francesco
источник

15

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

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

Аджай Гупта
источник

2

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

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

Эльбаз
источник

2

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

Это дает:

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

Кристофер Чич
источник

1

вы сэкономили мое время, я использовал «последнего ребенка», который не работал, но ваше решение сработало отлично

Мирза Обейд

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

Ответы: