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 s

Answer 1

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.