Список селекторов

CSS список селекторов (,) выбирает все соответствующие ноды.

/* Выбирает все соответствующие элементы */
span,
div {
  border: red 2px solid;
}

Для уменьшения размеры таблицы стилей, можно использовать разделяемый запятой список селекторов.

Синтаксис

element, element, element { свойства стиля }

Примеры

Группирование на одной линии

Группирование селекторов списком, разделённым запятой, на одной строк.

h1, h2, h3, h4, h5, h6 { font-family: helvetica; }

Мультистрочное группирование

Группирование селекторов списком, разделённым запятой, на нескольких строках.

#main,
.content,
article {
  font-size: 1.1em;
}

Невалидные списки селекторов

Недостатком использования списков селекторов является то, что они не являются эквивалентными:

h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }

Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.

Есть способ исправить это - нужно использовать селектор :is(), который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как :is() вычисляет спецификацию.

h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }

Спецификации

Specification
Selectors Level 4
# grouping

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

  • The :is() Экспериментальная возможность and :where() Экспериментальная возможность pseudo-classes, which don't have the legacy mistake that is selector list invalidation.