Как влияет на Relayout селектор на родителя в CSS?

Селектор на родителя `:has()` позволяет стилизовать элемент по его потомкам. Он может увеличивать стоимость пересчёта стилей, но сам по себе не вызывает relayout.

Как это работает

.card:has(img) { padding: 0; }
.form:has(input:invalid) .submit { opacity: .5; }

При любом изменении потомков (добавили узел, сменился класс, изменилось состояние поля) браузеру нужно перепроверить, подходит ли родитель под селектор.

Когда это дорого

• :has() на очень общих элементах (body:has(...), *:has(...)) — изменение где угодно в документе заставляет перепроверять много узлов;
• сложные аргументы с глубокими цепочками внутри.

Relayout

Relayout (layout) начинается, только если в результате изменились свойства, влияющие на геометрию (display, размеры, отступы). Если :has() меняет только цвет — будет перерисовка без раскладки.

Как использовать безопасно

• ограничивать область: .form:has(...), а не body:has(...);
• простые аргументы;
• проверять в DevTools Performance (Recalculate Style).

Коротко для собеседования

:has() увеличивает работу по пересчёту стилей при изменениях потомков; layout запускается, только если меняются геометрические свойства; важно ограничивать область селектора.

Подробнее: MDN — :has()