Как применить стиль к родителю если потомок имеет класс?

Question

[Stanislav6]

Ребят, есть вот такая конструкция:

<ul class="parent">
  <li><span class="checked">Первый</span></li >
  <li><span>Второй</span></li >
  <li><span>Третий</span></li >
</ul>

.parent li span {
  color: black;
}
.parent:hover li span {
  color: grey;
}
.parent:hover li span:hover {
  color: black;
}
.parent li span.checked {
  color: black;
}

Задача: наводим на родителя —> меняем цвет всех span на серый; если есть span.checked — меняем цвет всех span на серый кроме выбранного; если нет ни одного span.checked — оставляем серый в наведении и черный вне наведения.

Всё реализовал, кроме серого цвета для всех span кроме выбранного, когда снимаем наведение. Чёт не пойму как правильно сослаться.

Comments

[Вадим]

Через комбинацию not и has, но селектор has достаточно свежий

[HARDOOPS]

В настоящее время метода, совместимого с большим количество браузеров, нет. Селектор :has() слишком молод, так что он пригодится ещё ой как не скоро...

Что имеем итого? Устанавливайте на родителя соответствующий тег напрямую в бэкенд-коде, либо в JS-скрипте. Применить к .checked другой цвет можно с помощью селектора :not().

[Anonymous]

has вообще лучше не использовать. Сами посмотрите, гугл начали его поддерживать с августа 2022 года, но еще совсем хреновая поддержка и вы теряете 14% пользователей.
Вот например Samsung Internet стал его поддерживать два месяца назад.
А Firefox, как всегда, самый отсталый браузер, не поддерживает его до сих пор!

[Anonymous]

HARDOOPS,
поддержка у :not тоже не лучшая, 6,63% пользователей потеряны.

[Stanislav6]

Ладно, спасибо. Через :has делать пока не буду, сделаю через js

[strelok011]

Стоит обратить внимание - каскадные су...ка стили - они на то и КАСКАДНЫЕ, нельзя вернуться в прошлое то бишь к родителю. Это по умолчанию. Всё остальное - через js, а хотелки "обратиться к родителю" говорят о неправильной архитектуре. И has в этом ключе выглядит очень плохо (в этом месте было много мата).