Взаимодействие с другими классами и блоками можно ли так?

Question

[QSnake]

Изучаю верстку и CSS. Пока что я не могу понять, как из условного блока изменить значение в другом.

Хочу, чтобы при нажатие на один блок было взаимодействие с другим блоком. Но только не родительском классе, а в другом, так можно?

Я уже пробовал лепить пластилин, но мой код был ужасный и куча всего ненужного. Прошу подсказать, в каком направлении мне вообще двигаться, чтобы понять суть моего вопроса.

Comments

[Lynn «Кофеман»]

Мы не знаем что у вас голове, а без этого знания вопрос выглядит как бессвязный поток слов…

[Lynn «Кофеман»]

В 99% случаев слово «нажатие» в вопросе приводит к использованию JS.

[Ankhena]

При введении :has можно достучаться до чего угодно, если в нём есть хоть какая-то логика.

Но ваш вопрос слишком абстрактный, хорошо бы его уточнить.

И не очень понятно о каком "значении" идёт речь.

[Сергей delphinpro]

Лучше без условностей и абстракций. Приводите конкретный пример с кодом.

Answer 1

[Вадим Освальд]

Можешь попробовать работать с селектором :has(), но он может не работать на старых браузерах.
Простой пример:

<div class="container">
    <div class="trigger">Наведи на меня</div>
    <div class="target">Я изменюсь</div>
</div>

.trigger {
    padding: 10px;
    background-color: lightblue;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.target {
    padding: 10px;
    background-color: lightcoral;
    transition: background-color 0.3s ease;
}

.container:has(.trigger:hover) .target {
    background-color: lightgreen;
}

Селектор :has() проверяет, есть ли внутри родительского элемента container активный элемент с классом .trigger, на который наведен курсор. Когда блок trigger находится в состоянии hover, :has() находит это состояние в родительском контейнере, в контейнере срабатывает правило: стиль для target меняется на background-color: lightgreen.
Еще можно юзать JS

Answer 2

[ImagineTables]

Декларативно (на pure CSS) можно сделать что-то типа такого:

body:has(.first-block:hover) .second-block
{
    background: red;
}

И неважно, где эти блоки и как связаны. :hover можно заменить на другой псевдокласс, обозначающий взаимодействие с юзером, например :active или :focus-visible.

Но для кликов лучше прибегнуть к императивному скрипту (используется jQuery):

$('.first-block').on('click', () => $('.second-block').addClass('red');

И, само собой, CSS:

.red
{
    background: red;
}