CSS select all previous siblings for a star rating [duplicate]

Question

I want to do a star rating control but I can't seem to find a way to select all previous siblings on hover. Does such thing even exist or do I have to use javascript?

span {
  display:inline-block;
  width: 32px;
  height: 32px;
  background-color:#eee;
}

span:hover {
  background-color:red;
}

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

Answer 1

"I can't seem to find a way to select all previous siblings on hover"

Unfortunately CSS can only target, and therefore select, subsequent elements in the DOM. Thankfully this can, of course, be emulated with CSS or enabled with JavaScript.

First, the CSS approach which requires either CSS Grid or CSS Flexbox in order to adjust the order of elements on the page:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  /* to place a 1em gap between items, applicable
     to both Grid and Flexbox: */
  gap: 1em;
  width: 80vw;
  margin: 1em auto;
}

div.withFlex {
  /* Using flexbox layout: */
  display: flex;
  /* In the HTML you might have noticed that the '5 star'
     element comes before the '1 star'...'4 star' element,
     this property reverses the order of the flex-items
     (the <span> elements) in the flex-box layout: */
  flex-direction: row-reverse;
  /* spacing the elements apart, this approach places the
     available space (after the element-sizes have been
     calculated) between the elements: */
  justify-content: space-between;
}

div.withFlex span {
  border: 1px solid #000;
  flex: 1 1 auto;
}


/* here we use Grid layout: */

div.withGrid {
  display: grid;
  /* we force the grid-items (the <span> elements) to
     flow into columns rather than rows: */
  grid-auto-flow: column;
  /* here we cause the layout - again - to be reversed,
     flowing from right-to-left: */
  direction: rtl;
}

div.withGrid span {
  border: 1px solid currentcolor;
  text-align: left;
}


/* here we select the <span> that the user hovers over,
   plus any subsequent siblings, and style them differently;
   as the subsequent elements appear - visually - before the
   hovered-<span> this gives the illusion that we're selecting
   previous elements in the DOM: */

span:hover,
span:hover~span {
  color: #f90;
  border-color: currentcolor;
}

<div class="withFlex">
  <span>5 stars</span>
  <span>4 stars</span>
  <span>3 stars</span>
  <span>2 stars</span>
  <span>1 star</span>
</div>

<div class="withGrid">
  <span>5 stars</span>
  <span>4 stars</span>
  <span>3 stars</span>
  <span>2 stars</span>
  <span>1 star</span>
</div>

In addition to the above, assuming that you want the elements to have the ability to remain selected – while still using CSS & HTML – then using some <input> and <label> elements is also possible:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  /* to place a 1em gap between items, applicable
     to both Grid and Flexbox: */
  gap: 1em;
  width: 80vw;
  margin: 1em auto;
}

input[type=radio] {
  position: absolute;
  top: -10000px;
  left: -10000px
}

label {
  border: 1px solid currentcolor;
  cursor: pointer;
}

div.withFlex {
  /* Using flexbox layout: */
  display: flex;
  /* In the HTML you might have noticed that the '5 star'
     element comes before the '1 star'...'4 star' element,
     this property reverses the order of the flex-items
     (the <span> elements) in the flex-box layout: */
  flex-direction: row-reverse;
  /* spacing the elements apart, this approach places the
     available space (after the element-sizes have been
     calculated) between the elements: */
  justify-content: space-between;
}

div.withFlex label {
  flex: 1 1 auto;
}


/* here we use Grid layout: */

div.withGrid {
  display: grid;
  /* we force the grid-items (the <span> elements) to
     flow into columns rather than rows: */
  grid-auto-flow: column;
  /* here we cause the layout - again - to be reversed,
     flowing from right-to-left: */
  direction: rtl;
}

div.withGrid label {
  direction: ltr;
}


/* here we select the <span> that the user hovers over,
   plus any subsequent siblings, and style them differently;
   as the subsequent elements appear - visually - before the
   hovered-<span> this gives the illusion that we're selecting
   previous elements in the DOM: */
label:hover,
label:hover~label {
  color: #f90f;
  border-color: currentcolor;
}

/* here we select all <label> elements that follow an <input>
   of type=radio (using an attribute-selector) which is checked: */
input[type=radio]:checked~label {
  color: #f90c;
  border-color: currentcolor;
}

<div class="withFlex">

  <!-- because we're styling the <label> elements based
       on the state (checked/unchecked) of the <input>
       elements we have to place the relevant <input>
       before the affected <label> in the DOM; which is
       why they precede the element that's being styled.
       While the :focus-within pseudo-class exists there
       is (as yet) no comparable ':checked-within', and
       the :has() pseudo-class does not yet (in 2020)
       exist; JavaScript could be used but this demo is
       to show HTML/CSS methods rather than JS: -->
  <input id="withFlexInput5" type="radio" name="rating1" />
  <label for="withFlexInput5">
    5 stars
  </label>

  <input id="withFlexInput4" type="radio" name="rating1" />
  <label for="withFlexInput4">
    4 stars
  </label>

  <input id="withFlexInput3" type="radio" name="rating1" />
  <label for="withFlexInput3">
    3 stars
  </label>

  <input id="withFlexInput2" type="radio" name="rating1" />
  <label for="withFlexInput2">
    2 stars
  </label>

  <input id="withFlexInput1" type="radio" name="rating1" />
  <label for="withFlexInput1">
    1 star
  </label>
</div>

<div class="withGrid">

  <input id="withGridInput5" type="radio" name="rating2" />
  <label for="withGridInput5">
    5 stars
  </label>

  <input id="withGridInput4" type="radio" name="rating2" />
  <label for="withGridInput4">
    4 stars
  </label>

  <input id="withGridInput3" type="radio" name="rating2" />
  <label for="withGridInput3">
    3 stars
  </label>

  <input id="withGridInput2" type="radio" name="rating2" />
  <label for="withGridInput2">
    2 stars
  </label>

  <input id="withGridInput1" type="radio" name="rating2" />
  <label for="withGridInput1">
    1 stars
  </label>
</div>

Answer 2

// obtain all spans from DOM
const spans = document.querySelectorAll('span');
// set a variable at global scope as indicator
let flag = false; 

// add event listener to each span
spans.forEach((sp, j)=>{
    sp.addEventListener('click', ()=>{
    // if clicked, then not dismissing the background colour after mouse leave
    flag = true;
    // reassign all spans back to original grey
    spans.forEach(dsp=>{
        dsp.style.backgroundColor = '#eee';
    });
    // assign bg to red of the spans from 0 to clicked index
    Array.from(new Array(j+1), (x, i) => i).forEach(ind=>{
        spans[ind].style.backgroundColor = 'red';
    });
  });
    // redo if mouse enters
    sp.addEventListener('mouseenter', ()=>{
    flag = false;
  });
    // if any span is hovered
    sp.addEventListener('mouseover', ()=>{
    // reassign all spans back to original grey
    spans.forEach(dsp=>{
        dsp.style.backgroundColor = '#eee';
    });
    // assign bg to red of the spans from 0 to clicked index
    Array.from(new Array(j+1), (x, i) => i).forEach(ind=>{
        spans[ind].style.backgroundColor = 'red';
    });
  });
  // in moseleave, only save the background colour if click happened
  sp.addEventListener('mouseleave', ()=>{
    if(!flag){
      spans.forEach(dsp=>{
        dsp.style.backgroundColor = '#eee';
      });
    }
  });
});

span {
  display:inline-block;
  width: 32px;
  height: 32px;
  background-color:#eee;
}

span:hover {
  background-color:red;
  opacity: 0.8;
  cursor: pointer;
}

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

Answer 3

There are other CSS solutions here which use Flexbox and CSS Grid.

But, if you're happy to go old school, the same effect can be achieved with:

float: right;

Working Example:

div {
float: left;
width: 180px;
}

span {
float: right;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 4px;
background-color: #eee;
cursor: pointer;
}

span:hover,
span:hover ~ span {
background-color: red;
}

<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Answer 4

As suggested in the comments, one approach is to style everything, and then undo the styling for subsequent elements. The only real downside is that if you're over the container div but in between spans, then you get everything styled red. One fix would be to put the spans all on one line, so that there's no whitespace between.

#parent {
  line-height: 0;
  display: inline-block;
}
#parent span {
  display:inline-block;
  width: 32px;
  height: 32px;
}
#parent:hover span {
  background-color:red;
}
#parent:hover span:hover~span {
  background-color:#eee;
}

<span id="parent">
<span></span><span></span><span></span><span></span><span></span>
</span>

Answer 5

The javascript above seems nicer but if you're looking for a pure CSS solution, here's a weird trick.

First you need to use flexbox to reverse the order of elements. Then you can use neighbor selectors + in css to color all the "previous" elements (which are really the next elements).

I realize it's a little silly, maybe but it is a CSS only solution and was kind of fun to try.

And if you need it to be 6 stars or 10, it's not easily extended because you need to paste in a bunch of extra CSS rules. If you are using Sass, you could probably build a function that would generate those rules for you.

UPDATE: I saw @David's post and it's much better - using the ~ selector.

.parent { 
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.parent span {
  display: block;
  border: 1px solid black;
  width: 32px;
  height: 32px;
  background-color: #eee;
}
span + span { 
  margin-right: 10px;
}

span:hover {
  background-color: red;
}

span:hover + span {
  background-color: red;
}
span:hover + span + span {
  background-color: red;
}
span:hover + span + span + span {
  background-color: red;
}
span:hover + span + span + span + span{
  background-color: red;
}

<div class="parent">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>