title: star ratings hover independent for each star rating
body: <p>I am having a weird issue when i have one star rating the code works really fine but the problem is when i add another star rating. the second star rating is connected with the first star rating (each change i make to the second one appears in the first). i want to know how to fix this error and make each star rating independent<br>
      html code </p>
  
  <pre><code>&lt;fieldset class="rating"&gt;
      &lt;legend&gt;Please rate:&lt;/legend&gt;
      &lt;input type="radio" id="star5" name="rating" value="5" /&gt;
  &lt;label for="star5" title="Rocks!"&gt;5 stars&lt;/label&gt;
      &lt;input type="radio" id="star4" name="rating" value="4" /&gt;
  &lt;label for="star4" title="Pretty good"&gt;4 stars&lt;/label&gt;
      &lt;input type="radio" id="star3" name="rating" value="3" /&gt;
  &lt;label for="star3" title="Meh"&gt;3 stars&lt;/label&gt;
      &lt;input type="radio" id="star2" name="rating" value="2" /&gt;
  &lt;label for="star2" title="Kinda bad"&gt;2 stars&lt;/label&gt;
      &lt;input type="radio" id="star1" name="rating" value="1" /&gt;
  &lt;label for="star1" title="Sucks big time"&gt;1 star&lt;/label&gt;
  &lt;/fieldset&gt;
   &lt;br&gt;
   &lt;br&gt;
   &lt;br&gt;
  &lt;fieldset class="rating"&gt;
      &lt;legend&gt;Please rate:&lt;/legend&gt;
      &lt;input type="radio" id="star5" name="rating" value="5" /&gt;&lt;label for="star5" title="Rocks!"&gt;5 stars&lt;/label&gt;
      &lt;input type="radio" id="star4" name="rating" value="4" /&gt;&lt;label for="star4" title="Pretty good"&gt;4 stars&lt;/label&gt;
      &lt;input type="radio" id="star3" name="rating" value="3" /&gt;&lt;label for="star3" title="Meh"&gt;3 stars&lt;/label&gt;
      &lt;input type="radio" id="star2" name="rating" value="2" /&gt;&lt;label for="star2" title="Kinda bad"&gt;2 stars&lt;/label&gt;
      &lt;input type="radio" id="star1" name="rating" value="1" /&gt;&lt;label for="star1" title="Sucks big time"&gt;1 star&lt;/label&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>CSS code </p>
  
  <pre><code>.rating {
      float:left;
  }
  
  /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
     follow these rules. Every browser that supports :checked also supports :not(), so
     it doesn’t make the test unnecessarily selective */
  .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: '★ ';
  }
  
  .rating &gt; input:checked ~ label {
      color: #f70;
      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>