title: CSS change style of different element upon active
body: <p>Trying to change the content of an image by clicking another image (image gallery viewer), using pure HTML/CSS.</p>
  
  <p>I am using the <code>gumby.css</code> <a href="http://gumbyframework.com/" rel="nofollow noreferrer">framework</a> and currently have the following HTML:</p>
  
  <pre><code>&lt;section id="sect"&gt;
      &lt;div class="three columns"&gt;
          &lt;img src"/images/help.png"&gt;
      &lt;/div&gt;
      &lt;div class="one column"&gt;
          &lt;img src"/images/help.png"&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And the following css:</p>
  
  <pre><code>#sect .three.columns img:hover {
      content:url("/images/about.png");
      border: 5px solid red;
  }
  
  #sect .one.column img:active ~ #sect .three.columns img {
      content:url("/images/about.png");
      border: 5px solid red;
  }
  </code></pre>
  
  <p>The first css rule for <code>#sect .three.columns img:hover</code> works perfectly, indicating I have selected the right element. But the second one <code>#sect .one.column img:active ~ #sect .three.columns img</code> does nothing upon active.</p>
  
  <p>Refer to <a href="https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered">here</a> for the meaning of <code>~</code>.</p>
  
  <p>Anyone have any ideas?</p>
  
  <p>Thanks.</p>