I would like to highlight the first 3 stars to have the hover effect when the 4th element is selected, and same would apply to the first 2 stars if the 3rd item is hovered over.

I tried using this then it works but it selects from the right side, but I want it from the left side

.miniRankButton:hover  ~ .miniRankButton{
    color: #FFE136;
}

this is the base code.

<div>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
</div>

.miniRankButton {
    display: inline-block;
    background: #FFF;
    border: none;
    font-size: 22pt;
    color: #BDBDBD;
}

.miniRankButton:hover {
    color: #FFE136;
}

TIA

EDIT

I want this to be pure css.

CodePudding user response：

Just play around with hover on parents and child:

.miniRankButton {
  display: inline-block;
  background: #FFF;
  border: none;
  font-size: 22pt;
  color: #BDBDBD;
}

div:hover .miniRankButton {
  color: #FFE136;
}

.miniRankButton:hover~.miniRankButton {
  color: #BDBDBD;
}

<div>
  <button class="miniRankButton">★</button>
  <button class="miniRankButton">★</button>
  <button class="miniRankButton">★</button>
  <button class="miniRankButton">★</button>
  <button class="miniRankButton">★</button>
</div>

CodePudding user response：

Another solution by just reversing the order of the stars:

.wrap {
  display: flex;
  flex-direction: row-reverse;
  width: min-content;
}
.miniRankButton {
    display: inline-block;
    background: #FFF;
    border: none;
    font-size: 22pt;
    color: #BDBDBD;
}

.miniRankButton:hover {
    color: #FFE136;
}

.miniRankButton:hover  ~ .miniRankButton{
    color: #FFE136;
}

<div class="wrap">
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
</div>