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

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 Status Comment
Selectors Level 4
Определение 'Selector Lists' в этой спецификации.
Рабочий черновик Переименовано в "selector list"
CSS Level 1
Определение '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.