CODEWITHSUNDEEP
htmlcsscss-selectors
Atex
Atex

Reputation: 49

Multiple colors of previous silbing selector

I'd like to create my own rank system. I've 5 classes (each defines one fontello icon "star" in rating).

For instance, when I select third star - it should change itself and all previous icons to yellow collow. Fifth = all green stars etc. Also there should appear text like in my example below.

I found few solutions (like in that fiddle), but all of them used only one color on one class.

I need to use differents classes to insert valid score to my database. Is it possible to do without javascript?

.txt_star1, .txt_star2, .txt_star3, .txt_star4, .txt_star5
{
  display: none;
}
<a class = "star1">ICO1</a>
<a class = "star2">ICO2</a>
<a class = "star3">ICO3</a>
<a class = "star4">ICO4</a>
<a class = "star5">ICO5</a>
<div class = "txt_star1">Very bad</div>
<div class = "txt_star2">Bad</div>
<div class = "txt_star3">Passable</div>
<div class = "txt_star4">Good</div>
<div class = "txt_star5">Excellent</div>

Upvotes: 2

Views: 58

Answers (1)

Gerrit0
Gerrit0

Reputation: 9182

If you are open to reversing the order of your items in the HTML this is fairly simple to do as you can use :nth-child(n) along with the ~ to color your items. The only downside is that the CSS gets a bit lengthy. 

.stars {
  display: flex;
  flex-direction: row-reverse;
  cursor: pointer;
  width: 230px;
  background: black;
  color: white;
}

.star {
  padding: 5px;
}

.star:nth-child(5):hover,
.star:nth-child(5):hover ~ .star {
  color: red;
}

.star:nth-child(4):hover,
.star:nth-child(4):hover ~ .star {
  color: blue;
}

.star:nth-child(3):hover,
.star:nth-child(3):hover ~ .star {
  color: green;
}

.star:nth-child(2):hover,
.star:nth-child(2):hover ~ .star {
  color: orange;
}

.star:nth-child(1):hover,
.star:nth-child(1):hover ~ .star {
  color: yellow;
}
<div class="stars">
  <span class="star">ICO5</span>
  <span class="star">ICO4</span>
  <span class="star">ICO3</span>
  <span class="star">ICO2</span>
  <span class="star">ICO1</span>
</div>

Upvotes: 3

Related Questions