Style class by attribute value (nth-child)

Question

I want to append style on a class depending on the value in the parents data-attribute.

In my case, rating starts.

If data-rating is for ex. 3, the first three starts should be filled with a color.

I assume nth-child will do the trick, but i can't manage it to work..

This is my html:


    
         /* Filled */
         /* Filled */
         /* Filled */

I'm using sass.

Thx!

user_395910 · Answer

Since CSS support for reading values from data- attributes are still extremely limited, you cannot rely on reading the data-rating to dynamically apply :nth-child rules. However, since you are using a CSS preprocessor (SASS as you mentioned), you can use a @for loop to generate all the necessary selectors required. The caveat to this solution is that you will need to pre-determinate the maximum rating (in this case, it is 5).

The SASS code below (also available as a gist) will do more or less what you're intending to achieve. To select for the first x elements, you can use the :nth-child(-n+x) selector rule.

Use the SASS @for loop to iterate through all possible star ratings (1 through x, where x is 5 in your case)
Generate a selector that targets the .rating[data-rating='x']
In each .rating selector, you use the nth-child trick above to style the first x stars.

// Some basic configuration
$stars: 5;
$star-color: #FFD464;

// Baes styles for unfilled stars
.rating {
  .star {
    color: #ccc;
  }
}

// Create custom nth-child selectors for each data-rating value
@for $i from 1 through $stars {
  .rating[data-rating='#{$i}'] {
    .star:nth-child(-n+#{$i}) {
      color: $star-color;
    }
  }
}

Disclaimer: The only major drawback of this method is that it gets bloated quickly when you have too many stars. Having 5 stars is not an issue, since you will only generate 5 different sets of rules (plus with the adent of gzipping and CSS minification, the code bloat does not incur a heavy overhead). Imagine if you have a 10-star rating system, the selector rules will be overly verbose: in that case, you might want to consider a JS-based solution.

Here is a proof-of-concept example using the compiled SASS code above:

.rating .star {
  color: #ccc;
}

.rating[data-rating='1'] .star:nth-child(-n+1) {
  color: #FFD464;
}

.rating[data-rating='2'] .star:nth-child(-n+2) {
  color: #FFD464;
}

.rating[data-rating='3'] .star:nth-child(-n+3) {
  color: #FFD464;
}

.rating[data-rating='4'] .star:nth-child(-n+4) {
  color: #FFD464;
}

.rating[data-rating='5'] .star:nth-child(-n+5) {
  color: #FFD464;
}

Even better: Use pseudo-elements to change star glyphs

If you want to use different glyphs for filled and unfilled stars, that is also possible. You simply use the ::before (or ::after) pseudo-element to inject the correct glyph conditionally (\2605 for filled star, \2606 for empty star) , again using the same iterative logic as above:

// Some basic configuration
$stars: 5;
$star-color: #FFD464;
$stars-filled: "\2605";
$stars-empty: "\2606";

// Baes styles for unfilled stars
.rating {
  .star {
    color: #ccc;
    &::before {
      content: $stars-empty;
    }
  }
}

// Create custom nth-child selectors for each data-rating value
@for $i from 1 through $stars {
  .rating[data-rating='#{$i}'] {
    .star:nth-child(-n+#{$i}) {
      color: $star-color;

      &::before {
        content: $stars-filled;
      }
    }
  }
}

@charset "UTF-8";
.rating .star {
  color: #ccc;
}
.rating .star::before {
  content: "☆";
}

.rating[data-rating='1'] .star:nth-child(-n+1) {
  color: #FFD464;
}
.rating[data-rating='1'] .star:nth-child(-n+1)::before {
  content: "★";
}

.rating[data-rating='2'] .star:nth-child(-n+2) {
  color: #FFD464;
}
.rating[data-rating='2'] .star:nth-child(-n+2)::before {
  content: "★";
}

.rating[data-rating='3'] .star:nth-child(-n+3) {
  color: #FFD464;
}
.rating[data-rating='3'] .star:nth-child(-n+3)::before {
  content: "★";
}

.rating[data-rating='4'] .star:nth-child(-n+4) {
  color: #FFD464;
}
.rating[data-rating='4'] .star:nth-child(-n+4)::before {
  content: "★";
}

.rating[data-rating='5'] .star:nth-child(-n+5) {
  color: #FFD464;
}
.rating[data-rating='5'] .star:nth-child(-n+5)::before {
  content: "★";
}

user_4947434 · Answer

You can try this.

This bit of sass code all you need. CODEPEN

 @for $i from 1 through 5 {
  .rating[data-rating="#{$i}"] {
      .fa-star:nth-child(-n+#{$i}) {
          color: yellow;
      }
  }
}

Check out the compiled css and full code.

body {
  background: #333;
}

.container {
  margin: 25px 50px;
}

.rating[data-rating="1"] .fa-star:nth-child(-n+1) {
  color: yellow;
}

.rating[data-rating="2"] .fa-star:nth-child(-n+2) {
  color: yellow;
}

.rating[data-rating="3"] .fa-star:nth-child(-n+3) {
  color: yellow;
}

.rating[data-rating="4"] .fa-star:nth-child(-n+4) {
  color: yellow;
}

.rating[data-rating="5"] .fa-star:nth-child(-n+5) {
  color: yellow;
}

user_5014677 · Answer

Sass is a css generator. There's no interaction between sass and html like in js and html. So it's not possible from sass to go inside the html and take an attribute value.

What you need is a js/jquery solution.

for example: $(".star:nth-child(-n+"+$(".rating").attr("data-rating")+")").css("background","red")

Style class by attribute value (nth-child)

3 Answers

Even better: Use pseudo-elements to change star glyphs