Как работает псевдокласс :has() в CSS?

Псевдокласс :has() в CSS позволяет задавать стили родительских элементов на основе их дочерних элементов. htmlbook.ru webref.ru

Принцип работы: заданные стили применяются к элементу только в том случае, если он содержит дочерние элементы с указанным селектором. gitverse.ru Если такого элемента нет, то дополнительные стили не используются. liquidhub.ru

Некоторые примеры использования:

• div:has(p) { background: red; }. liquidhub.ru Компонент div получит красный фон в том случае, если внутри него есть хоть один абзац, обёрнутый в тег <p>. liquidhub.ru
• button:has(.icon). htmlbook.ru webref.ru Применяет стиль к элементам <button>, внутри которых есть элемент с классом .icon. htmlbook.ru webref.ru
• h1:has(+ h2). htmlbook.ru webref.ru Применяет стиль к элементам <h1>, после которых идёт элемент <h2>. htmlbook.ru webref.ru
• li:has(+ li:hover). htmlbook.ru webref.ru Применяет стиль к предыдущему пункту списка (<li>) при наведении. htmlbook.ru webref.ru
• article:has(audio, video). htmlbook.ru webref.ru Применяет стиль к элементам <article>, внутри которых есть элемент <audio> или <video>. htmlbook.ru webref.ru

Внутри :has() нельзя вставлять другой :has(), а также псевдоэлементы (::first-line, ::before, ::after и другие). htmlbook.ru