Select all items before hovered item

Question

I have a container with 5 inline stars.

What I need is when you hover over a star, that star and all the stars before it get a different background . (I'm using a sprite so I change the background position for this)

Markup:

<div class="wpr"> 
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
</div>

If I use the sibling combinator (~) I get the reverse effect.

.star:hover, .star:hover ~ .star
{
    background-position: 0 -18px;
} 

FIDDLE

How can I implement this for the all the stars before the hovered one?

Answer 1

Lol, just figured it out,

I just need to add direction: rtl; on the wrapper.

FIDDLE

Answer 2

For anyone who feels that direction: rtl is too hacky (because it was never really designed to align a group of star rating icons), I recommend floating the stars to the right instead:

.star {
    float: right;
    width: 20px;
    height: 15px;
    background: url(stars.png) 0 -1px no-repeat;
}

Since the wrapper is an inline block itself anyway, it will still shrink-to-fit.

For that matter, you can even float the wrapper as well if you decide that you really hate inline blocks and want to ditch them entirely:

.wpr {
    padding: 10px 20px;
    border: 1px solid gold;
    border-radius: 5px;
    float: left;
    position: relative;
    font-size: 0;
}

Answer 3

As an alternative to the other (good) answers - you could also use transform:rotate().

Rotate the parent element -180 degrees:

.wpr {
    transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
}

Then rotate the children elements 180 degrees:

.star {
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}

WORKING EXAMPLE HERE

Just be aware of the support of CSS3 transforms.

If this is a concern, you can throw in the -ms/-moz/-o vendors prefixes too.