title: CSS selector not working +, ~
body: <p>this is driving me crazy :</p>
  
  <pre><code>&lt;span class="fa-stack fa-lg"&gt;
    &lt;i class="fa fa-circle fa-stack-2x fcc1" style=""&gt;&lt;/i&gt;
    &lt;i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;span class="fa-stack fa-lg"&gt;
    &lt;i class="fa fa-circle fa-stack-2x fcc2" style=""&gt;&lt;/i&gt;
    &lt;i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2"&gt;&lt;/i&gt;
  &lt;/span&gt;
  
  &lt;style&gt;
  .fccc1:hover, .fccc2:hover, {
  color:#115ebb!important;
  }
  .fccc1:hover + .fcc1 {
  color:white!important;  
  }
  .fccc2:hover + .fcc2 {
  color:white!important;  
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>The first CSS rule for the hover is working perfectly.
  However the second and third css rule to change an other class when hovered is not working. I dont see any errors in the code and to my understanding this should work. I also tried with out the + and with a ~ selector.</p>
  
  <p>Any help appriciated.</p>