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

Question

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

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

tr > td[0],

tr > td[-1] {

/* styles */

}

472 4

css css-selectors

4 ответов:

Comments

Ничего не найдено.

James Allardice · Accepted Answer · 2011-08-29 13:18:59

можно использовать :first-child и :last-child псевдо-селекторы:
tr td:first-child,
tr td:last-child {
    /* styles */
}
Это должно работать во всех основных браузерах, но IE7 имеет некоторые проблемы, когда элементы добавляются динамически (и это не будет работать в IE6).

Francesco · Accepted Answer · 2017-06-20 18:21:29

вы можете использовать следующий фрагмент:
  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}
используя следующие псевдоклассы:

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

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

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

Ajay Gupta · Accepted Answer · 2015-12-04 13:45:03

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

Christopher Chiche · Accepted Answer · 2016-11-15 16:55:37

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

это дает:
td:first-of-type, td:last-of-type {
    /* styles */
}