title: CSS - Selecting Previous Sibling
body: <p>I have two elements:</p>
  
  <pre><code>&lt;div id="next_prayer"&gt;...&lt;/div&gt;
  &lt;div class="prayers_lower"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>I am trying change the height of <code>#next_prayer</code> when <code>prayers_lower</code> is hovered on.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.prayers_lower {
    min-height: 10%;
    height: 10%;
  }
  .prayers_lower:hover {
    height: 30%;
  }
  .prayers_lower:hover + #next_prayer {
    height: 60%;
  }
  .prayers_lower:hover ~ #next_prayer {
    height: 60%;
  }
  .prayers_lower:hover ~ #next_prayer {
    height: 30%;
  }
  
  .prayers_lower:hover ~ #next_prayer {
    height: 30%;
  }
  </code></pre>
  
  <p>Nothing is working - I don't see any of the styles being applied to the <code>~</code> selected elements. </p>
  
  <p>How can I make this work?</p>