Як вибрати першу та останню TD підряд?

Як можна вибрати перше та останнє TDпідряд?

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

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

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

Це має працювати у всіх основних браузерах, але в IE7 є деякі проблеми, коли елементи додаються динамічно (і він не працюватиме в IE6).

Ви можете використовувати такий фрагмент:

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

Використання наступних псевдокласів:

: first-child означає "вибрати цей елемент, якщо він є першою дитиною його батька".

: last-child означає "вибрати цей елемент, якщо він є останньою дитиною його батька".

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

Ви можете використовувати : перша дитина та : остання дитина 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;
}

Обидва способи чудово працюють

Якщо ви використовуєте sass (scss), ви можете використовувати такий фрагмент:

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

Якщо рядок містить кілька провідних (або кінцевих) thтегів перед tdтобою, слід скористатися :first-of-typeі :last-of-typeселекторами. Інакше перший tdне буде обраний, якщо це не перший елемент рядка.

Це дає:

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