Seleccionar todos los artículos antes del elemento suspendido

Tengo un contenedor con 5 estrellas en línea.

Lo que necesito es cuando pasas el cursor sobre una estrella, esa estrella y todas las estrellas antes de que tenga un fondo diferente. (Estoy usando un sprite así que cambio la posición de fondo para esto)

Margen:

Si uso el combinador hermano (~) obtengo el efecto inverso.

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

VIOLÍN

¿Cómo puedo implementar esto para todas las estrellas antes del vuelo estacionario?

Para cualquiera que sienta esa direction: rtl es demasiado hacky (porque en realidad nunca fue diseñado para alinear un grupo de icons de clasificación de estrellas), recomiendo flotar las estrellas hacia la derecha en su lugar:

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

Dado que el envoltorio es en sí mismo un bloque en línea de todos modos, aún se contraerá para ajustarse.

Para el caso, incluso puede flotar la envoltura también si decide que realmente odia los bloques en línea y desea deshacerse de ellos por completo:

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

Lol, lo descubrí,

Solo necesito agregar direction: rtl; en la envoltura

VIOLÍN

Como alternativa a las otras (buenas) respuestas, también puede usar transform:rotate() .

Gire el elemento principal -180 grados:

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

Luego gire los elementos de los niños 180 grados:

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

EJEMPLO DE TRABAJO AQUÍ

Solo tenga en cuenta el soporte de las transformaciones CSS3 .

Si esto es una preocupación, también puede -ms prefijos de vendedores -ms / -ms / -o .