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

Answer 1

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;
}