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

Список селекторов CSS (,) выбирает все соответствующие узлы. Список селекторов — это перечень селекторов, разделённых запятыми.

Описание

Если для нескольких селекторов используются одинаковые объявления, их можно сгруппировать в список, разделённый запятыми. Списки селекторов также можно передавать в качестве параметров некоторым функциональным псевдоклассам CSS. Перед запятой и/или после неё могут быть пробелы.

Следующие три объявления эквивалентны:

span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

:is(span, div) {
  border: red 2px solid;
}

Примеры

Если одни и те же стили применяются к элементам, соответствующим разным критериям, группировка селекторов в список, разделённый запятыми, помогает повысить согласованность и уменьшить размер таблиц стилей.

Группировка в одну строку

В этом примере показана группировка селекторов в одну строку с помощью списка, разделённого запятыми.

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", "Arial";
}

Группировка в несколько строк

В этом примере показана группировка селекторов в несколько строк с помощью списка, разделённого запятыми.

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

Допустимые и недопустимые списки селекторов

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

Недопустимый список селекторов

Недостаток использования списка селекторов заключается в том, что один неподдерживаемый селектор в списке делает недействительным всё правило.

Рассмотрим следующие два набора правил CSS:

h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}

Они не эквивалентны. В первом наборе правил стили будут применены к элементам h1 и h3, но правило h2:invalid-pseudo не будет обработано. Во втором наборе правил, поскольку один из селекторов в списке недопустим, всё правило не будет обработано. Поэтому к элементам h1 и h3 не будут применены стили: если хотя бы один селектор в списке недопустим, весь блок стилей игнорируется.

Список селекторов с пропуском недопустимых селекторов

Проблему недопустимого списка селекторов можно решить с помощью псевдокласса :is() или :where(), которые принимают список селекторов с пропуском недопустимых селекторов. Каждый селектор в таком списке обрабатывается отдельно. Поэтому все недопустимые селекторы в списке игнорируются, а допустимые используются.

Продолжая предыдущий пример, можно видеть, что следующие два набора правил CSS теперь эквивалентны:

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;
}

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

Относительный список селекторов

Относительный список селекторов — это разделённый запятыми список селекторов, который обрабатывается как относительные селекторы, начинающиеся с явного или подразумеваемого комбинатора.

h2:has(+ p, + ul.red) {
  font-style: italic;
}

В приведённом выше примере курсивное начертание будет применено к любому заголовку h2, за которым непосредственно следует <p> или <ul class="red">. Обратите внимание, что псевдоэлементы и селектор :has() недопустимы в относительном списке селекторов :has().

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

Совместимость с браузерами

См. также

• Псевдоклассы :is() и :where() принимают списки селекторов с пропуском недопустимых селекторов.
• Псевдокласс :not() принимает обычный список селекторов
• Псевдокласс :has() принимает относительный список селекторов.
• Модуль селекторов CSS
• Селекторы и комбинаторы