Пост Замена кода на React на CSS :has псевдокласс

Замена кода на React на CSS :has псевдокласс Через CSS можно стилизовать дочерние элементы на основании родительского элемента: .content .card { background: #f0f0f0; } С помощью псевдокласса :has можно сделать наоборот, снизу вверх: стилизовать родительский элемент на основании дочернего элемента. Например, карточки, в которых есть изображение, имеют другой цвет границы: .card:has(img) { border-top: 10px solid #fee6ec; } Псевдокласс :has поддерживается всеми основными браузерами, глобально 92% пользователей поддерживают его. С помощью псевдокласса :has можно сделать многие фичи без написания кода на React. В своем блоге Надя Макаревич рассказала несколько примеров использования :has, которые заменяют код на React. Например, стилизация карточки и соседних карточек при фокусе на кнопки действий внутри карточки. Пример CSS стилей: // Все карточки после карточки с фокусом на кнопку «открытия» .card:has([data-action='open']:focus-visible) ~ .card, // Все карточки перед карточкой с фокусом на кнопку «открытия» .card:has(~ .card [data-action='open']:focus-visible) { filter: greyscale(); background-color: #f6f7f6; } // Стиль карточки с фокусом на кнопку «открытия» .card:has([data-action='open']:focus-visible) { transform: scale(1.02); border-top: 10px solid #c3dccf; } https://www.developerway.com/posts/replacing-react-with-css