Функциональные селекторы
CSS-функции для группировки, фильтрации и условного выбора элементов: :is, :where, :has, :not.
Зачем нужно
Упрощают сложные селекторы, снижают дублирование и позволяют выбирать элементы на основе их потомков или состояния. :has — первый «родительский селектор» в CSS.
Где используется
:is/:where— группировка селекторов без повторов:has— стили родителя на основе дочерних элементов:not— исключение элементов из выборки
Code example
/* :is — группировка (специфичность = самый тяжёлый аргумент) */
:is(h1, h2, h3) { color: #1e293b; }
/* :where — группировка (специфичность = 0) */
:where(article, section) p { line-height: 1.7; }
/* :has — родительский селектор */
.card:has(img) { padding: 0; }
.form-group:has(:invalid) { border-color: red; }
/* :not — исключение */
button:not(.primary) { background: transparent; }
li:not(:last-child) { border-bottom: 1px solid #e5e7eb; }
/* Комбинация */
:is(article, section):has(h2):not(.legacy) {
padding-block: 2rem;
}