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

Когда несколько селекторов используют одни и те же объявления, их можно сгруппировать в список, разделённый запятыми. Список селекторов также может передаваться в качестве параметров некоторым функциональным псевдоклассам 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;
}

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

#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 селекторы