title: CSS - Hide elements (class) based on value of select box
body: <p>I have a <code>&lt;select&gt;</code> box in a <code>&lt;form&gt;</code>, and when its value is <code>other</code>, I want elements that have the class <code>.applicableSupportCase</code> to be hidden. I am trying to do this with just CSS. What am I doing wrong?</p>
  
  <h2>CSS</h2>
  
  <pre><code>.applicableSupportCase  {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #typeBox[value="other"] ~ .applicableSupportCase{
    opacity: 0;
    transform: scaleY(0);
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;select class="contactField" id="typeBox"&gt;
    &lt;option value="supportCase" selected="selected"&gt;Support case&lt;/option&gt;
    &lt;option value="other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label class="applicableSupportCase"&gt;Device:&lt;/label&gt;
  </code></pre>
  
  <p>There are more elements with the <code>applicableSupportCase</code> class, but you get the point.</p>