0

In CSS we can change the style of a child element by clicking on the parent element for example with 'a' tag

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

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

or 

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

So when i click on a.button the i.icon disappear

But if we have multiple element like 

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

How we can effect the style of the a.button1 by clicking on the a.button2?

Is it possible with CSS without using jQuery methods ?

Soufiane Douimia
  • 440
  • 3
  • 12

4 Answers4

2

Have you considered the "checkbox hack"? The article Stuff you can do with the Checkbox Hack contains examples of this technique using checkbox, radio buttons, tabbed areas, dropdown menus, push toggles, and collapsing panels. The links at the bottom of this article contain more examples.

The article CSS Click Events maybe what you are looking for.

The article 101 Ways to (ab)use a Checkbox is worth reviewing.

RandyDaddis
  • 1,020
  • 10
  • 19
  • The "Checkbox Hack" is a really cool article, and has some novel stuff in there. However it does mention in the bottom that it crosses the line into bad semantics, and generally JS should be used to control behavior, so depending on your codebase this might not be desirable. Still a worthwhile read, for sure – he77kat_ Jan 06 '19 at 01:50
  • With the advent of **autonomous custom (HTML) elements**, it seems like that "line" is blurring: (https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-example) – RandyDaddis Jan 08 '19 at 04:11
1

There is no universally-supported method in CSS of producing a click or hover behavior in an element that isn't a child node of the clicked/hovered element, unfortunately. As another answer pointed out, there are combinators but they don't work the way you'd like for "active" selectors.

Here's an example.

I would recommend going to good old JavaScript for this.

document.querySelector('.button1').addEventListener('click', function() {
    document.querySelector('.button2').style.color = red;
});
he77kat_
  • 495
  • 4
  • 12
0

I think you are looking for a sibling combinator. See: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

I do not think this is universally supported by all browsers, so be careful when using things like this in a production environment.

Other types of combinators: https://www.w3schools.com/css/css_combinators.asp

mbunch
  • 560
  • 7
  • 21
0

In css, you are able to select the next sibling (in this case, clicking a.button1 to effect a.button2) by using css adjacent sibling selector (+):

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

Unfortunately css is unable to select the previous sibling, so you can do it with javascript:

document.querySelector('.button2').addEventListener('focusin', function() {
    this.previousSibling.firstChild.style.display = 'none';
});
Kemal Dwiheldy
  • 409
  • 1
  • 4
  • 14