Why is the stars selecting back wards?

Why is the stars selecting back wards? https://codepen.io/T031C/pen/yLqOEQZ
TOXIC
CodePen
yLqOEQZ
...
10 Replies
Mannix
Mannix2y ago
because of this
.star-label:hover ~ .star-label {
color: yellow;
}
.star-label:hover ~ .star-label {
color: yellow;
}
TOXIC
TOXIC2y ago
Is there a way to fix it?
Mannix
Mannix2y ago
what do you mean by fix it ?
TOXIC
TOXIC2y ago
Turning it around
Mannix
Mannix2y ago
it does what you tell it to do you could use flexbox i guess
TOXIC
TOXIC2y ago
Oh
Jochem
Jochem2y ago
by which Mannix means setting display: flex on the parent containing the stars, along with flex-direction: row-reverse;
TOXIC
TOXIC2y ago
Ah thanks now I understand more
Jochem
Jochem2y ago
@toxic_dev there's an answer on SO you might be able to adapt: https://stackoverflow.com/a/27993987
Stack Overflow
Is there a "previous sibling" selector?
The plus sign selector (+) is for selecting the next adjacent sibling. Is there an equivalent for the previous sibling?
Jochem
Jochem2y ago
the main issue is going to be making sure that the entirety of .stars is covered by .star-labels, and there's no gaps between the principle works though, and doesn't require you to mess with the display order, which could theoretically be an accessibility problem