title: How can I keep the hover effect like a rating bar css code?
body: <p>Click the code and see it. I could do all the hover effect I want except one that I could not keep the green highlight after user click the radio button. Like most star rating code, if the user select the third radio button, the first three items should be green. I know I should use <code>&gt; ~</code>, <code>:checked</code> and <code>:not(:checked)</code>,  I had tried a lot but fail, appreciate your help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rating_bar{
      width:100px;
      height:30px;
      margin: 4px 175px !important;    
      display:inline-block;
      display:inline;
  }
  
  #rating_bar &gt; label:before{
       content:'0';
       color: #c7c5c5;
       cursor:pointer;
       font-size:3em;
  }
  
  #rating_bar:hover &gt; label:before {
      color: #4bce32;
  }
  #rating_bar &gt; label:hover ~ label:before {
      color: #c7c5c5;
  }
  #rating_bar &gt;input :checked ~ label:before {
      color: #c7c5c5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="rating_bar"&gt;
  
     &lt;input type="radio" id="rate_1" name="rating_f" value="1" /&gt;&lt;label for="rate_1" title="Super effecitive!"&gt;&lt;/label&gt;
     &lt;input type="radio" id="rate_2" name="rating_f" value="1" /&gt;&lt;label for="rate_2" title="Pretty effective!"&gt;&lt;/label&gt;
     &lt;input type="radio" id="rate_3" name="rating_f" value="3" /&gt;&lt;label for="rate_3" title="Effective!"&gt;&lt;/label&gt;
     &lt;input type="radio" id="rate_4" name="rating_f" value="4" /&gt;&lt;label for="rate_4" title="Kinda effective!"&gt;&lt;/label&gt;
     &lt;input type="radio" id="rate_5" name="rating_f" value="5" /&gt;&lt;label for="rate_5" title="Not effective!"&gt;&lt;/label&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>