Problems with :nth-of-type in haml and scss

Question

DEMO

I'm having a really weird problem with haml and scss...I want to loop through div.star and apply a random width, height and position. I am able to do this, and I can see in the compiled code that everything is working as expected, yet for some reason the .star's aren't getting the appropriate style. I'm sure it's a really dumb mistake but I can't figure it out!

Answer 1

The problem is that you'r using .star:nth-of-type. It is not going to work because the pseudo-class nth-of-type is only going to work if you are using types.

Like p:nth-of-type(6) {} or div:nth-of-type(2).

 @for $j from 1 through 20 {
    .star:nth-of-type(#{$j}) {
        $x: random(4px) + 1px;
        width: $x;
        height: $x;
        top: random(40) * 1%;
        left: random(100) * 1%;
    }

}

What I did to make it work is this....

HTML

Add a wrapper class .star-wrapper around all the stars

.background
.stripe
.stripe
-(1..42).each do |i|
.hex
.corner.corner-1
.corner.corner-2
.corner.corner-3
.star-wrapper
-(1..20).each do |j|
.star

CSS

So now you say, go trough all the divs that are inside that wrapper and give them a random position

.star-wrapper {
 @for $j from 1 through 20 {
    div:nth-of-type(#{$j}) {
        $x: random(4px) + 1px;
        width: $x;
        height: $x;
        top: random(40) * 1%;
        left: random(100) * 1%;
      }
   }
}

.star-wrapper .star {
    position: absolute;
    @include border-radius(50%);
    background: rgba(255,255,255,0.5);
    z-index: 100;
}

I hope it helps you... read also this question [CSS3 selector :first-of-type with class name?

SECOND QUESTION

Add this to the html in the codepen example

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

I added four spans with the class .star

.star:nth-of-type(10) {
 width: 10px;
 height: 10px;
 background: red;
 }

Sow, you would expected that the 10 item would be red, but it isn't the case. .star:nth-of-type is rendered as div:nth-of-type, it doesn't look at the span tags.

The Result

Element 15 is has a red color.