Lo que puedes puedes hacer es seleccionar los <li>
que requieras y aplicarles la propiedad pointer-events:none !important;
. Puedes seleccionarlos de muchas formas como por ejemplo por medio de su atributo data-index
, como puedes notar este atributo es único para cada uno por los cual no habrá ningún problema.
NOTA: también puedes seleccionar los <li>
utilizando nth-child()
o simplemente añadiendo una clase especial a cada uno, en fin hay muchísimas formas en las que puedes lograr tu objetivo
Acá te dejo una de las tantas formas en las que se puede dar solución a tu problema.
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12px;
-ms-flex: 0 0 12px;
flex: 0 0 12px;
height: 24px;
background-position: -12px 0px;
background-image: url(http://svgshare.com/i/3KS.svg);
cursor: pointer;
}
.c-rating__item.left {
background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:hover {
background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:hover {
background-position: -24px 0;
}
li[data-index="7"],
li[data-index="8"],
li[data-index="9"]{
pointer-events:none !important;
}
<ul class="c-rating">
<li class="c-rating__item is-active left" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active left" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active left" data-index="4"></li>
<li class="c-rating__item is-active" data-index="5"></li>
<li class="c-rating__item is-active left" data-index="6"></li>
<li class="c-rating__item" data-index="7"></li>
<li class="c-rating__item left" data-index="8"></li>
<li class="c-rating__item" data-index="9"></li>
</ul>
Y esta otra forma que es totalmente válida:
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12px;
-ms-flex: 0 0 12px;
flex: 0 0 12px;
height: 24px;
background-position: -12px 0px;
background-image: url(http://svgshare.com/i/3KS.svg);
cursor: pointer;
}
.c-rating__item.left {
background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:hover {
background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:hover {
background-position: -24px 0;
}
.c-rating__item:nth-child(8),
.c-rating__item:nth-child(9),
.c-rating__item:nth-child(10){
pointer-events:none !important;
}
<ul class="c-rating">
<li class="c-rating__item is-active left" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active left" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active left" data-index="4"></li>
<li class="c-rating__item is-active" data-index="5"></li>
<li class="c-rating__item is-active left" data-index="6"></li>
<li class="c-rating__item" data-index="7"></li>
<li class="c-rating__item left" data-index="8"></li>
<li class="c-rating__item" data-index="9"></li>
</ul>
Te adjunto una imagen donde puedes ver desde que versión los navegadores admiten esta propiedad css:

OTRA SOLUCIÓN UTILIZANDO LOS ESTILOS EXISTENTES
Pero como te digo si o si debes agregar más líneas de código
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12px;
-ms-flex: 0 0 12px;
flex: 0 0 12px;
height: 24px;
background-position: -12px 0px;
background-image: url(http://svgshare.com/i/3KS.svg);
cursor: pointer;
}
.c-rating__item.left {
background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:hover {
background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:hover {
background-position: -24px 0;
}
.c-rating__item:nth-child(8),
.c-rating__item:nth-child(10){
background-position: -12px 0px !important;
}
.c-rating__item:nth-child(9){
background-position: 0px 0px !important;
}
<ul class="c-rating">
<li class="c-rating__item is-active left" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active left" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active left" data-index="4"></li>
<li class="c-rating__item is-active" data-index="5"></li>
<li class="c-rating__item is-active left" data-index="6"></li>
<li class="c-rating__item" data-index="7"></li>
<li class="c-rating__item left" data-index="8"></li>
<li class="c-rating__item" data-index="9"></li>
</ul>
EXPLICACIÓN: Esta otra forma lo que hace es obligar a los últimos <li>
a mantener la posición inicial de su background-image
ignorando el :hover
Para tu solución teniendo en cuenta el dinamismo de las estrellas simplemente deberías de quitar las líneas del :hover
y listo
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12px;
-ms-flex: 0 0 12px;
flex: 0 0 12px;
height: 24px;
background-position: -12px 0px;
background-image: url(http://svgshare.com/i/3KS.svg);
cursor: pointer;
}
.c-rating__item.left {
background-position: 0px 0px;
}
.c-rating__item.is-active{
background-position: -36px 0;
}
.c-rating__item.left.is-active{
background-position: -24px 0;
}
<ul class="c-rating">
<li class="c-rating__item is-active left" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active left" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active left" data-index="4"></li>
<li class="c-rating__item is-active" data-index="5"></li>
<li class="c-rating__item is-active left" data-index="6"></li>
<li class="c-rating__item" data-index="7"></li>
<li class="c-rating__item left" data-index="8"></li>
<li class="c-rating__item" data-index="9"></li>
</ul>