Как изменить дочерний класс через другой дочерний класс?

Question

[Minusator]

Как написать CSS код, который бы менял .cat-item-all если есть класс .current-cat

<ul class="blog-category">
<li class="cat-item-all">1</li>
<li class="cat-item cat-item-71 current-cat">2</li>
<li class="cat-item cat-item-30">3</li>
<li class="cat-item cat-item-70">4</li>
</ul>

Наглядно. В списке если нажимаем на кнопку, то ей присваивается класс .current-cat



Но нам нужно при этом изменить стиль кнопки "Все посты" чтобы было так:

Answer 1

[Minusator]

Решил на JS

if (document.getElementsByClassName('current-cat').length > 0) {
  document.getElementsByClassName('cat-item-all')[0].classList.add('show');
	}

Comments

[strelok011]

минус такого решения - если есть где-то еще такие кнопки, они будут влиять. Стоит ограничивать область действия каким-либо родительским контейнером.

Answer 2

[Сергей delphinpro]

ну если именно на CSS, то так

.blog-category:has(> .current-cat) > .cat-item-all {
  background:red;
}

Однако пока еще не работает в FireFox

Comments

[Minusator]

Благодарю!

Answer 3

[strelok011]

Версия css, которая умеет такие штуки, еще не вышла из черновиков https://habr.com/ru/articles/662355/
И как по мне - лучше такое не выпускать вовсе.
Если у Вас есть триггер для изменения состояния кнопки "тест 2", что мешает его расширить для выбора еще и "все посты"?
Вы пытаетесь размазать бизнес логику функционала страницы по разным местам, что выглядит просто ужасно.
Раньше пресловутый IE поддерживал выполнение скриптов в css, но благополучно выпилил.

Comments

[Сергей delphinpro]

Это не бизнес-логика. Это как раз логика представления: визуально выделить кнопку при каких-то условиях.

[strelok011]

Сергей delphinpro, вот категорически с таким подходом не согласен. Но тут уж каждый решает сам. Я в этой кухне оч давно варюсь, потому и выводы сделал для себя определенные.