Можно ли сократить CSS селектор?

Question

[gracer]

Приветствую!
Можно ли сократить подобный селектор CSS

#points-table tr td:first-child, #points-table tr th:first-child{
/* Some styles */
}

во что-то вроде

#points-table tr (td,th):first-child{
/* Some styles */
}

?

Answer 1

[Михаил]

Можно, написать так (если у вас в tr исключительно td и th)

#points-table tr > :first-child {
/* Some styles */
}

Comments

[gracer]

Спасибо, думаю, пока самый подходящий вариант.

[Сергей delphinpro]

можно даже без стрелочки :)
#points-table tr :first-child

[Михаил]

Сергей: в таком случае выбираться будут все первые элементы у всех потомков внутри td, вот пример со списком jsfiddle.net/fytpckbc

[zooks]

Сергей: @FFxSquall: лучше без стрелочки - просто выкинуть лишний tr.

#points-table td:first-child, #points-table th:first-child

. И как писали выше - использовать препроцессоры - все-таки 2015 год на дворе.

Answer 2

[Николай Шабалин]

На чистом CSS нет. Вы не сможете сократить это.
С помощью препроцессоров да.

#points-table tr {
    td,
    th {
        &:first-child {
            color:red;
        }
    }
}

Но я бы на Вашем месте вообще задумался - Почему я использую такие конструкции? Почему У мня такая неибическая вложенность? Могу ли избавться от идентификатора? И зачем мне это всё нужно.

Comments

[gracer]

Задача небольшая, поэтому нет смысла изучать препроцессоры. А не подскажете, чем плох идентификатор у таблицы?

[Николай Шабалин]

Именно я от него отказался из-за своего веса.
Если у вас будет несколько таких таблиц на странице, то вы уже не сможете написать #points-table, т.к. индентификатор должен быть один на странице, следовательно придёться скопирнуть код, либо #points-table, #points-another-table {}. Немного странно для одной и тоже таблицы. Если нужна будет такая же табличка, но с красненьким верхом, опять же нужно использовать #points-table ... th .. {bg:red;} либо городить костыль из !important.
Хотя всего этого можно избежать, не потеряв ничего, а только преобрести.

Answer 3

[Александр]

#points-table tr :first-child{
/* Some styles */
}

Answer 4

[desuvin]

Используйте sass или less, тогда выглядеть будет красиво

#points-table tr {
  td, th {
    &:first-child {
      // стили
    }
  }
}

Answer 5

[IceJOKER]

Тоже часто жалел , что НЕТ такой возможности :D