Hola a todos, estoy haciendo una especie de sistema de puntuación, en el que una clase general (stars) coge de fondo una imagen donde se encuentran todas las clasificaciones posibles y quiero que cada clasificacion tenga una clase particular para indicar la posicion en ese fondo de la puntuación.
Código HTML:
.stars{
background: url(../img/stars_rating.png) no-repeat;
float: left;
height: 8px;
width: 25%;
margin-left: 10px;
background-color: #fff;
}
.1star{background-position: 0px -51px;}
.2stars{background-position: 0px -51px;}
.3stars{background-position: 0px -51px;}
.4stars{background-position: 0px -51px;}
.5stars{background-position: 0px -51px;}
#php5{background-position: 0px -51px;}
Y no aparece ninguna de las puntuaciones si no que se queda en la posicion 0 0 de la imagen de fondo. Sin embargo, si en el mismo div coloco una id con una puntuacion, si aparece posicionado el fondo correctamente
Código HTML:
<ul class="subcampo">
<li>
<label>POO PHP5</label>
<div class="stars rounded 2-stars" id="php5"></div>
</li>
<li>
<label>Ruby On Rails</label>
<div class="1star rounded stars"></div>
</li>
<li>
<label>Asp</label>
<div class="3stars stars rounded"></div>
</li>
</ul>
¿Alguien sabe a qué puede deberse? Parece algo relacionado con preferencia de selectores o algo así porque al mirar con "herramienta para desarrolladores" la clase 1star por ejemplo, no está dando estilo a ningun div.