title: Front end UI graphical mechanism for 5 star rating
body: <p>I have a 5 star rating system which works fine from functional perspective.</p>
  
  <p>I have 5 separate images for stars which have listeners attached so the user can click each star (needs to be this way)</p>
  
  <p>Each star has a data-rating (1-5), and a data-product which jquery selects and adds to the json object.</p>
  
  <p>The only thing I need help with is the actual graphics</p>
  
  <p>When the user selects 4 star, the fourth star is currently coded to toggle a class to appear in a selected state.</p>
  
  <p>When a user selects 4, I want 3, 2 and 1 to also become selected. Equally if they then change their mind and click star 2, I want 4 and 3 to become unselected, and 1 to stay selected.</p>
  
  <p>It would be perfect if there was a way to achieve this in pure CSS using pseudo selectors. If not then jQuery is fine.</p>
  
  <p>Thanks for reading</p>