title: How to select all sibling selectors of a certain class, both before and after the active element?
body: <p>I have not been able to find an answer for this, so here goes:</p>
  <p>I have 4 divs on the page. When one div is :active, I want all the other divs to adopt <code>opacity:0;</code></p>
  <p>has anyone come up with a way to select all siblings, not just siblings that come after the <code>:active</code> element?</p>
  <pre><code>&lt;div class=&quot;circle c1&quot;&gt; &lt;/div&gt;
  &lt;div class=&quot;circle c2&quot;&gt; &lt;/div&gt;
  &lt;div class=&quot;circle c3&quot;&gt; &lt;/div&gt;
  &lt;div class=&quot;circle c4&quot;&gt; &lt;/div&gt;
  
  &lt;style type=&quot;text/css&quot;&gt;
  
      .c2:active ~.circle {
          opacity: 0;
      }
  &lt;/style&gt;
  </code></pre>
  <p>From this example, the .c1 div will never disappear. What is a solution that uses only CSS?</p>