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

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' в этой спецификации.
Рекомендация Первое определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Selector list (,)Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

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

  • The :is()  and :where()  pseudo-classes, which don't have the legacy mistake that is selector list invalidation.