Справочник HTML & CSS

:has()

Выбирает элемент, внутри которого есть что-то подходящее под селектор в скобках, — «селектор родителя».

Синтаксис

selector:has(relative) { … }

Параметры

Параметр	Тип	Описание
relative	selectors	Селектор, который проверяется относительно элемента: `img`, `> p`, `+ h3`, `input:checked`.

Примеры

Карточка с картинкой получает другую рамку:

<style>
  .card { padding: 12px; border: 2px solid lightgray; margin-bottom: 8px; }
  .card:has(img) { border-color: royalblue; }
</style>
 
<div class="card">Text only</div>
<div class="card"><img src="/media/photo-200x200.jpg" alt="" width="60"> With a photo</div>

Подпись подсвечивается, когда флажок отмечен:

<style>
  label:has(input:checked) { background: palegreen; }
</style>
 
<label><input type="checkbox"> I agree</label>

Примечания

:has() работает во всех актуальных браузерах (с 2023 года). Внутри другого :has() его использовать нельзя. Держите аргумент простым — слишком широкий :has() на body заставляет браузер много перепроверять при каждом изменении.

См. также

:is() — Срабатывает, если элемент подходит под любой селектор из списка, — способ сократить длинные списки селекторов.
:not() — Выбирает элементы, которые не подходят ни под один из селекторов в скобках.
:checked — Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.

Вопросы и ответы по теме

В учебнике

Современные селекторы — Селекторы :is(), :where(), :not() со списком и :has() — как сократить длинные селекторы и выбрать родителя по его содержимому.

Спасибо, что читаете!