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

Описание

Когда селекторы используют одинаковые 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;}

Синтаксис

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

Примеры

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

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

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

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

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

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

#main,.content,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() в том, что специфичность:is() равна его наиболее специфичному аргументу, тогда как селектор:where() и прощающий список селекторов в качестве его параметра не добавляют какой-либо специфичности.

Список относительных селекторов

Таким списком является списокотносительных селекторов разделённых запятыми и начинающихся с явного или предполагаемого комбинатора.

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

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

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

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

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

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