TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

🤔 Почему у нас в 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;
}


Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему у нас в 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;
}


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)