I have a 5 star rating system which works fine from functional perspective.

I have 5 separate images for stars which have listeners attached so the user can click each star (needs to be this way)

Each star has a data-rating (1-5), and a data-product which jquery selects and adds to the json object.

The only thing I need help with is the actual graphics

When the user selects 4 star, the fourth star is currently coded to toggle a class to appear in a selected state.

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.

It would be perfect if there was a way to achieve this in pure CSS using pseudo selectors. If not then jQuery is fine.

Thanks for reading