В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга.
Обычные селекторы идут от родителя к дочерним элементам.
.parent .child {
color: red;
}
Что было бы с селектором родителя?
.child:has-parent(.parent) {
color: red;
}
В CSS4 появился
:has()
, который позволяет изменять родителя, если в нём есть определённый потомок. .parent:has(.child) {
border: 2px solid red;
}
Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.
.parent {
display: flex;
gap: 10px;
}
Если нужно изменить родителя динамически, можно использовать JavaScript.
document.querySelectorAll(".child").forEach(child => {
child.parentElement.classList.add("has-child");
});
.has-child {
border: 2px solid blue;
}
Ставь 👍 и забирай 📚 Базу знаний