Используйте .article > :is(h2, h3) { color: blue; }. Комбинатор > ограничивает выбор непосредственными детьми, а :is объединяет альтернативные типы элементов.
Как объединить выбор h2 и h3 одним CSS-селектором?
Используйте `.article > :is(h2, h3) { color: blue; }`. Комбинатор > ограничивает выбор непосредственными детьми, а :is объединяет альтернативные типы элементов.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Внутри .article нужно покрасить только непосредственные дочерние h2 и h3 в синий. Вложенные заголовки внутри секций трогать нельзя. Нужен один селектор верхнего уровня вместо двух правил .article > h2 и .article > h3.
Ответ
Используйте .article > :is(h2, h3) { color: blue; }. Комбинатор > ограничивает выбор непосредственными детьми, а :is объединяет альтернативные типы элементов.
Запятая внутри :is является частью аргумента функционального псевдокласса, а не разделяет два верхнеуровневых селектора. Если запрещена вообще любая запятая, для произвольного набора h2/h3 понадобилось бы изменить разметку, например добавить общий класс. Специфичность :is берётся от наиболее специфичного аргумента; :where имеет другое правило веса.
Источник: developer.mozilla.org.