Simple Rating Star CSS - html

Question

I am trying to build a simple rating system using HTML and CSS. It's a very simple rating bar which consist of 5 stars.
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="star5" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
The problem is that I can only select the star up to 4.5 star which is half of the 5th star, what I want is to select the full 5 star. I have included an image of the rating bar below. Help is really appreciated.
Rating bar

Answer 1

Just a typo- needed to change star5 to 5star:
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>