Список селекторов
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 |
---|
Selectors Level 4 # grouping |
Поддержка браузерами
BCD tables only load in the browser