title: CSS to prevent star rating from resetting with multiple star ratings
body: <p>I would like to be able to select multiple star ratings without resetting the previous one.  In the link below, if you rate the 'Price' and then want to rate the 'Valuation', it resets the 'Price'.  </p>
  
  <p>I added <code>one</code> and <code>two</code> to the <code>fieldset</code> element's class and targeted it in the CSS, but haven't found a way to make it work with the code I have.  Thanks for the help.</p>
  
  <p><strong>Here is my code</strong>
  <a href="http://jsfiddle.net/snewcomer24/zexvtoz1/" rel="nofollow">http://jsfiddle.net/snewcomer24/zexvtoz1/</a></p>
  
  <pre><code>.rating {
    float:left;
  }
  
  .rating:not(:checked) &gt; input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
  }
  
  .rating:not(:checked) &gt; label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
  }
  
  .rating:not(:checked) &gt; label:before {
    content: &amp;#9733;
  }
  
  .rating &gt; input:checked ~ label {
    color: #ff7700;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
  }
  
  .rating:not(:checked) &gt; label:hover,
  .rating:not(:checked) &gt; label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
  }
  
  .rating&gt; input:checked + label:hover,
  .rating&gt; input:checked + label:hover ~ label,
  .rating&gt; input:checked ~ label:hover,
  .rating&gt; input:checked ~ label:hover ~ label,
  .rating&gt; label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
  }
  
  .rating &gt; label:active {
    position:relative;
    top:2px;
    left:2px;
  }
  </code></pre>
  
  
  
  <pre><code>     &lt;fieldset class="rating one"&gt;
  &lt;input type="radio" id="star5" name="rating" value="5" /&gt;&lt;label for="star5" title="Rocks!"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star4" name="rating" value="4" /&gt;&lt;label for="star4" title="Pretty good"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star3" name="rating" value="3" /&gt;&lt;label for="star3" title="Meh"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star2" name="rating" value="2" /&gt;&lt;label for="star2" title="Kinda bad"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star1" name="rating" value="1" /&gt;&lt;label for="star1" title="Sucks big time"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
  
      &lt;fieldset class="rating two"&gt;
  &lt;input type="radio" id="star5-1" name="rating" value="5" /&gt;&lt;label for="star5-1" title="Rocks!"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star4-1" name="rating" value="4" /&gt;&lt;label for="star4-1" title="Pretty good"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star3-1" name="rating" value="3" /&gt;&lt;label for="star3-1" title="Meh"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star2-1" name="rating" value="2" /&gt;&lt;label for="star2-1" title="Kinda bad"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
  &lt;input type="radio" id="star1-1" name="rating" value="1" /&gt;&lt;label for="star1-1" title="Sucks big time"&gt;&lt;span&gt;&amp;#9733&lt;/span&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
  </code></pre>