Возможно ли в CSS изменить стиль элемента, нажав на другой элемент?

Question

В CSS мы можем изменить стиль дочернего элемента, щелкнув родительский элемент, например, с помощью тега 'a'

<a class='button' href='#'>Example <i class='icon'></i></a>

a.button:focus i.icon { display: none; } 

или

a.button:active i.icon { display: none; }

Поэтому, когда я нажимаю a.button, i.icon исчезает

Но если у нас есть несколько элементов, таких как

<a class='button1' href='#'>Example <i class='icon1'></i></a>
<a class='button2' href='#'>Example <i class='icon2'></i></a>

Как мы можем повлиять на стиль a.button1, нажав на a.button2?

Возможно ли это с помощью CSS без использования методов jQuery?

Answer 1

В css вы можете выбрать следующего брата (в этом случае нажмите a.button1, чтобы применить a.button2), используя css смежный селектор брата (+):

a.button1:focus + a.button2 > i.icon2 {display: none}

К сожалению, css не может выбрать предыдущего брата, поэтому вы можете сделать это с помощью JavaScript:

document.querySelector('.button2').addEventListener('focusin', function() {
    this.previousSibling.firstChild.style.display = 'none';
});

Answer 2

В CSS не существует универсально поддерживаемого метода создания поведения щелчка или наведения на элемент, который, к сожалению, не является дочерним узлом элемента clicked / hovered. Как указал другой ответ, есть комбинаторы, но они не работают так, как вы хотели бы для «активных» селекторов.

Вот пример.

Я бы порекомендовал перейти на старый добрый JavaScript для этого.

document.querySelector('.button1').addEventListener('click', function() {
    document.querySelector('.button2').style.color = red;
});

Answer 3

Рассматривали ли вы "взлом флажка"? Статья Вещи, которые вы можете сделать с помощью Checkbox Hack , содержит примеры этой техники с использованием флажков, переключателей, областей с вкладками, выпадающих меню, переключателей и сворачивающихся панелей. Ссылки в нижней части этой статьи содержат больше примеров.

Статья События CSS-кликов возможно, то, что вы ищете.

Статья 101 Способы (ab) использовать флажок заслуживает рассмотрения.

Answer 4

Я думаю, что вы ищете комбинатор родного брата. Смотри: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

Я не думаю, что это универсально поддерживается всеми браузерами, поэтому будьте осторожны при использовании подобных вещей в производственной среде.

Другие типы комбинаторов: https://www.w3schools.com/css/css_combinators.asp