Change color of elements before element

Question

I want to make rating. I have no idea how to make previous elements get style of checked element.

CSS

.give-rate label i {
  color: lightgray;
  cursor: pointer;
}
.give-rate .selected i {
   color: gold;
}

HTML

{% for radio in rating.Rate %}
 {{form_widget(radio)}}
 <label for="{{radio.vars.id}}" id="star-{{radio.vars.value}}" class="required">
   <i class="fas fa-star" id="{{radio.vars.value}}" onclick="pick({{radio.vars.value}})"></i>
 </label>
{% endfor %}

JS

function pick(id) {
 const star = document.getElementById("star-" + id);
 const stars = document.getElementsByClassName("selected");
 while (stars.length > 0) {
  stars[0].classList.remove("selected");
 }

 star.classList.add("selected");
}

This is working (picking one selected star from five and changes it color to gold) but I want stars that are behind selected one change color also.

I've tried changing css to:

.give-rate .selected::before i,
.give-rate .selected i {
  color: gold;
}

but this way none star was changing color.

Is there anyone who can tell what should I do?

It would help, if you can add a minimal working code for this. — Udo E., Aug 23 '19 at 11:17
add the code in js fiddle so that it helps to understand code better. — supriya suresh g, Aug 23 '19 at 11:22

score 0 · Accepted Answer · answered Aug 23 '19 at 11:15

0

There is no such thing as a selector that would apply on an element, and all of the previous siblings.

You should use JavaScript to apply the selected class to the hovered star, and also the previous ones.

answered Aug 23 '19 at 11:15

Guerric P

30,447
6
48
86

Change color of elements before element

1 Answers1