Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Можно ли в CSS ссылаться на класс от внутреннего к внешнему?

ПрограммированиеСайты+1
Алексей
  ·   · 618
Пишу код, интересуюсь наукой, консультирую  · 26 сент 2022
Если вы задаете такой вопрос, то скорее всего что-то спроектировано не совсем верно в вашем приложении. Советую начать с анализа приложения и попытки решить все так, чтобы не потребовалось этого делать. 
Но все же, если отвечать на ваш вопрос, то ответ будет - да, можно, но скорее всего далеко не так, как вы это представляете. 
Недавно появился псевдо-класс ":has". Хоть его уже и можно использовать, но хочу вас предостеречь, он новый, поддерживается не лучшим образом и может вызывать проблемы скорости отрисовки. Вообще, на сколько я знаю, :has уже очень давно хотели внедрить, но с ним было очень много проблем и эти проблемы на сегодняшний день еще очень даже вероятны. Если мои доводы вас не убедили и вы никак не обойдетесь без обращения к родителю, давайте разберем варианты:
<div class="root">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
И CSS
.root:has(.child) {
    background-color: red;
}
И так, давайте теперь читать что у нас получилось - если есть элемент с классом child, то его родителю с классом root будет применен красный фон.
Наверно, многие уже готовятся написать, что это не обращение к родителю, но это не совсем так. Дело в том, что раньше не было  возможности реагировать на содержание контейнера. Чтобы яснее все представить приведу пример из реальной жизни. Допустим у вас есть новостная лента и в ней есть статьи с картинками и без. Сейчас эта задача решается созданием дополнительных классов, которые добавляются на этапе рендера html. Если вы эту задачу будете решать через has, вам не потребуется добавлять классы или модифицировать как-то html, другими словами внешний вид контейнера будет зависеть от содержания.
Еще один вариант обращения к родителю - превдо-класс :focus-within. С помощью него можно, к примеру, решить задачу - при клике на поле ввода в форме сделать подсветку контейнера. То есть, если мы пишем form:focus-within это означает, что если где-то внутри появится фокус, то применятся стили к контейнеру, то есть
<form class="form">
    <input class="form__input">
</form>
И CSS
.form:focus-within {
    background-color: red;
}
Но если вам надо как-то в обратную сторону явно селектить элементы средствами CSS, то такого варианта сейчас нет и вряд ли будет, это достаточно затратная операция работы с DOM.
Мои игры на Яндекс ИгрыПерейти на yandex.ru/games/developer