Применить стили к родительскому блоку

псевдокласс :has() в CSS предназначен для изменения стилей родительских элементов в зависимости от наличия определенных дочерних элементов. Он позволяет задать стили для родителя, если внутри него присутствуют определенные дочерние элементы, будь то с классами, тегами, атрибутами или другими характеристиками.

Вот несколько примеров использования :has():

а) С классом:

/* Изменение фона, если у .card есть элемент с классом .highlight */
.card:has(.highlight) {
  background-color: green;
}

б) Без использования класса:

/* Изменение стиля, если у .card есть элемент <p> */
.card:has(p) {
  background-color: lightblue;
}

в) С атрибутом:

/* Изменение стиля, если у .card есть <img> с атрибутом alt */
.card:has(img[alt]) {
  border: 2px solid blue;
}

г) С использованием структурных селекторов:

/* Изменение стиля, если первый дочерний элемент .card — это <h2> */
.card:has(:first-child h2) {
  padding: 30px;
}

❗поддержка :has() может быть ограничена в некоторых браузерах.

рекомендуется проверять текущую поддержку и совместимость с браузерами перед использованием

.card {
  padding: 20px;
  margin: 10px;
  border: 1px solid #ccc;
  background-color: white;
  transition: background-color 0.3s;
}


/* Изменение фона, если у card есть элемент с классом highlight */

.card:has(.highlight) {
  background-color: green;
}

<div class="card">
  <div class="content">
    <p>Это обычное содержимое</p>
  </div>
</div>

<div class="card">
  <div class="content highlight">
    <p>Это содержимое родителя :has</p>
  </div>
</div>

Можно задать родительскому элементу класс и обратиться к нему в css-файле