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

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 2

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.

Answer 3

Lol, just figured it out,

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

FIDDLE