Warning: mkdir(): No space left on device in /var/www/hottg/post.php on line 59

Warning: file_put_contents(aCache/aDaily/2025-07-22/post/easy_javascript_ru/--): Failed to open stream: No such file or directory in /var/www/hottg/post.php on line 72
🤔 Почему у нас в css нет селектора на родителе? @Frontend | Вопросы собесов
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;
}


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

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;
}


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12💊3
hottg.com/easy_javascript_ru/1658
3.67K views


>>Click here to continue<<

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



Share with your best friend
VIEW MORE

How Does Telegram Make Money?

Telegram is a free app and runs on donations. According to a blog on the telegram: We believe in fast and secure messaging that is also 100% free. Pavel Durov, who shares our vision, supplied Telegram with a generous donation, so we have quite enough money for the time being. If Telegram runs out, we will introduce non-essential paid options to support the infrastructure and finance developer salaries. But making profits will never be an end-goal for Telegram.

🤔 Почему у нас в css нет селектора на родителе?

Frontend | Вопросы собесов TG
Webview: 1658
Telegram TG Webview: hottg.com/easy_javascript_ru/webview
Telegram TG Channel: Frontend | Вопросы собесов
Telegram Updated:

United States America Popular Telegram Group (US)


Warning: Undefined array key 3 in /var/www/hottg/function.php on line 115

Fatal error: Uncaught mysqli_sql_exception: Too many connections in /var/www/db.php:16 Stack trace: #0 /var/www/db.php(16): mysqli_connect() #1 /var/www/hottg/function.php(212): db() #2 /var/www/hottg/function.php(115): select() #3 /var/www/hottg/post.php(351): daCache() #4 /var/www/hottg/route.php(63): include_once('...') #5 {main} thrown in /var/www/db.php on line 16