How do I target the style of an icon in CSS?

Question

I have the following code:

<span class="stars">★★☆☆☆   </span>

I want to target the empty stars to take on a different color. However, I do not know how to target this.

This doesn't do anything:

.glyphicon-glyphicon-star-empty{
    color: gray !important;
}

And this changes the color of all stars. Not the empty ones.

.entry-content span .stars{
    color:gray;
}

How can I change the border color to only the empty stars (the last 3)? I would like to only use CSS, but if JQuery or JavaScript is necessary, then I'm all ears. (FYI this won't be the only class.) I want to target ALL stars when they are empty.

Answer 1

You can color over them using an absolute positioned pseudo-element ( ::before ). Use data-stars attribute to change the number of stars. Add the amount of stars you want to color using jQuery's _.attr() or Element.setAttribute() :

 $('span').attr('data-stars', '☆☆☆'); 

 .stars { position: relative; } .stars::before { position: absolute; right: 0; height: 100%; color: red; content: attr(data-stars); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="stars">★★☆☆☆</span> 

Answer 2

I'm afraid you have to use extra classes. Like the following:

<span class="stars"><span class=“star-red”>★</span>☆</span>

And then simply add the star-red class to your css.