:target not working on previous element

Question

I have two images

<div class = "main-container">
        <div  class="img" id = "one">
            <a href="#one"><img src="1.jpg" ></a>
        </div>

        <div class="img" id = "two">
            <a href="#two"><img src="2.jpg"></a>
        </div>
</div>

when I click to first image, second should rotate and it is working, but when second image is clicked first one not rotating, however it cames to it's initial position. Only css was used:

#one:target ~ #two{
    transform: perspective( 600px ) rotateY( -355deg );
}
#two:target ~ #one{
    transform: perspective( 600px ) rotateY( -355deg );
}

Answer 1

• General sibling selector:

  The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

---

#two is preceded by #one, this will work:

#one:target ~ #two {}

---

#one is not preceded by #two, this will not work:

#two:target ~ #one {}

---

Simply invert the fragment identifiers value in the anchor's href attribute and remove the general sibling selectors.

#one:target {
  transform: perspective(600px) rotateY(-355deg);
}
#two:target {
  transform: perspective(600px) rotateY(-355deg);
}

<div class="main-container">
  <div class="img" id="one">
    <a href="#two">
      <img src="http://placehold.it/50x50">
    </a>
  </div>

  <div class="img" id="two">
    <a href="#one">
      <img src="http://placehold.it/50x50">
    </a>
  </div>
</div>