Возможно, но только не совсем так как вы этого ожидали. В современном CSS есть псевдо класс :has()
, при его помощи можно решить вашу задачу. Сам :has()
проверяет, имеет ли тот или иной селектор, совпадающий селектор записываемый в :has()
, если имеет, только самому элементу применяются стили. Пример:
header:has(h1) {
background-color: red;
}
В данном примере идёт такая проверка: если у элемента, совпадающего с селектором header
, имеется ребёнок (элемент) совпадающий с селектором h1
, то тогда к элементу совпадающего с header
, применяем красный фон. (Проще говоря, если у header
есть h1
, применяем красный фон к header
)
К сожалению :has()
появился в браузерах довольно поздно и у него плохая (мягко говоря) совместимость со старыми браузерами, а на Firefox (с 103 версии) так и вообще нужно включать специальную опцию в конфигурации браузера (нужно зайти в about:config
, в поиске написать layout.css.has-selector.enabled
и переключить значение на true
). В остальных браузерах ничего включать не нужно и всё работает из коробки (Если у вас конечно достаточно свежая версия).
Вот само решение:
.parent {
width: 100px;
height: 100px;
background-color: red;
}
.parent:has(.child:hover) {
background-color: blue;
}
<div class="parent">
<div class="child"></div>
</div>
Если же вы хотите, проверять не все .child
на :hover
, а только дочерние, то соответственно пишите так:
.parent {
width: 100px;
height: 100px;
background-color: red;
}
.parent:has(> .child:hover) {
background-color: blue;
}
<div class="parent">
<div class="child"></div>
</div>
.parent { height: 500px; width: 200px; margin: 0 auto; border: 2px solid; } .child { margin-top: 100px; height: 80px; width: 80px; } .parent:hover .child { background-color: red; }