title: Issue with star rating css
body: <p>I want to implement star rating I'm working on the following star rating code. It is working but the issue is if I have given 1 rating then I cannot deselect that one star that I have previously selected. It is happening only on the first star, because it doesn't have any star attached to it so that user can select it to deselect the previously selected star.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
  fieldset,
  label {
    margin: 0;
    padding: 0;
  }
  
  body {
    margin: 20px;
  }
  
  h1 {
    font-size: 1.5em;
    margin: 10px;
  }
  
  
  /****** Style Star Rating Widget *****/
  
  .rating {
    border: none;
    float: left;
  }
  
  .rating&gt;input {
    display: none;
  }
  
  .rating&gt;label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }
  
  .rating&gt;.half:before {
    content: "\f089";
    position: absolute;
  }
  
  .rating&gt;label {
    color: #ddd;
    float: right;
  }
  
  
  /***** CSS Magic to Highlight Stars on Hover *****/
  
  .rating&gt;input:checked~label,
  
  /* show gold star when clicked */
  
  .rating:not(:checked)&gt;label:hover,
  
  /* hover current star */
  
  .rating:not(:checked)&gt;label:hover~label {
    color: #FFD700;
  }
  
  
  /* hover previous stars in list */
  
  .rating&gt;input:checked+label:hover,
  
  /* hover current star when changing rating */
  
  .rating&gt;input:checked~label:hover,
  .rating&gt;label:hover~input:checked~label,
  
  /* lighten current selection */
  
  .rating&gt;input:checked~label:hover~label {
    color: #FFED85;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="rating"&gt;
    &lt;input type="radio" id="star5" name="rating" value="5" /&gt;&lt;label class="full" for="star5" title="Awesome - 5 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star4half" name="rating" value="4 and a half" /&gt;&lt;label class="half" for="star4half" title="Pretty good - 4.5 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star4" name="rating" value="4" /&gt;&lt;label class="full" for="star4" title="Pretty good - 4 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star3half" name="rating" value="3 and a half" /&gt;&lt;label class="half" for="star3half" title="Meh - 3.5 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star3" name="rating" value="3" /&gt;&lt;label class="full" for="star3" title="Meh - 3 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star2half" name="rating" value="2 and a half" /&gt;&lt;label class="half" for="star2half" title="Kinda bad - 2.5 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star2" name="rating" value="2" /&gt;&lt;label class="full" for="star2" title="Kinda bad - 2 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star1half" name="rating" value="1 and a half" /&gt;&lt;label class="half" for="star1half" title="Meh - 1.5 stars"&gt;&lt;/label&gt;
    &lt;input type="radio" id="star1" name="rating" value="1" /&gt;&lt;label class="full" for="star1" title="Sucks big time - 1 star"&gt;&lt;/label&gt;
    &lt;input type="radio" id="starhalf" name="rating" value="half" /&gt;&lt;label class="half" for="starhalf" title="Sucks big time - 0.5 stars"&gt;&lt;/label&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>