:is(): объединение вариантов селектора
Псевдокласс is позволяет записать несколько альтернатив в одном месте селектора. Он сокращает повторение общей части правила, сохраняя возможность выбрать разные типы элементов.
Назначение
Псевдокласс is позволяет записать несколько альтернатив в одном месте селектора. Он сокращает повторение общей части правила, сохраняя возможность выбрать разные типы элементов.
Как это работает
В скобках перечисляются селекторы через запятую. Специфичность определяется наиболее специфичным аргументом списка, поэтому добавление селектора с id способно повысить вес всего выражения.
Пример
<style>.lesson :is(h2,h3){color:#176b50;border-bottom:1px solid #b2cabc}.lesson p{color:#24382b}</style>
<section class="lesson"><h2>Разметка</h2><p>Короткое объяснение.</p><h3>Упражнение</h3><p>Проверьте структуру.</p></section>Что должно получиться
Оба уровня заголовков внутри lesson получают общий стиль. Абзацы не выбраны этим правилом. Общий префикс контейнера записан один раз.
Граница применения и частая ошибка
Не добавляйте id в список только ради случайного усиления правила: это усложнит последующие переопределения. Если хотите базовый стиль с нулевой специфичностью аргументов, изучите where.
Самостоятельная проверка
Перепишите правило обычным списком двух полных селекторов и сравните результат. Затем добавьте конкурирующий класс к одному заголовку и объясните победившее правило через специфичность, а не только порядок строк.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.