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