it-swarm.com.ru

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

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

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

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

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

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

347
James Allardice

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

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

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

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

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

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

18
Francesco

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

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

13
Ajay Gupta

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

Это дает:

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