Как с помощью SASS задать стиль родительскому элементу из дочернего?

Question

[Isaac Clark]

Здравствуйте.
Подскажите пожалуйста.

<div class='parent'>
  <span class='child'>child</span>
</div>
<div class='parent'>
  <span class='child completed'>child completed</span>
</div>

Вопрос: как сделать так, чтоб элемент, который имеет класс completed мог установить background-color: red своему родителю - parent

Comments

[Сергей delphinpro]

Sass — это настройка над CSS и он не может обойти фундаментальные ограничения CSS.
Когда-нибудь в далёком будущем, возможно будет реализован селектор :has и можно будет написать так

.parent:has(.completed) {
  background-color: red;
}

Но пока это из области фантастики. https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Если приспичило, решайте скриптами. Но лучше пересмотреть подход в принципе.

Answer 1

[David Halkin]

https://sass-scss.ru/documentation/sassscript/&_v_...

Answer 2

[Evgeny Zaharov]

Насколько я знаю, такой возможности нет ни в CSS, ни в SASS, ни в LESS. Если все должно быть именно так, то это к JS.
Если в родителе будет только один .child элемент, то будет удобнее добавлять .completed родителю, так можно будет задать стили и ему, и дочернему элементу.
Если больше одного - можете добавлять .completed и к .parent, и к .child. Родителю зададите стили с помощью селектора .parent.completed, а дочернему элементу с помощью .child.completed.
Ну и в целом не представляю, где вам может понадобиться подобная механика, так что хотелось бы увидеть пример поконкретнее.