0

I'm using Bourbon, Neat, and Bitters for this project, and I'm getting a bunch of my code from Refills.

I have a list of colors that I need to apply to 6 different h2 elements respectively.

I have successfully done this in a similar fashion elsewhere in the project, but I'm having a hard time translating it here.

Everything I've tried has resulted in just the first color being applied to all h2 elements. If I add a number after the $i in nth, like nth($colors, $i+1), it will apply the second color in the list to all of them.

Oddly, the CSS output is correct but the problem seems to be something to do with nth-of-type, because only the nth-of-type(1) appears.

Here's the important part of what I have so far:

.bullets {
  $icon-bullet-size: 3.5em;
  $colors:
      desaturate($logo-blue, 30),
      desaturate($logo-green, 10),
      desaturate($logo-yellow, 30),
      desaturate($badred, 30),
      desaturate($goldenrod, 30);

  padding: 2em;
  overflow: auto;
  margin-bottom: $base-line-height;
  text-align: center;


  h2 {
    @for $i from 1 to length($colors) {
      &:nth-of-type(#{$i}) {
        $color-from-list: nth($colors, $i);
        color: $color-from-list;
      }
    }
  }
}

The h2 elements are nested a couple levels deep, like this:

<ul class="bullets">
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>This needs to be one color</h2>
    <p>some content</p>
    </div>
</li>  
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>This is a second color</h2>
    <p>content</p>
  </div>
</li>
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>Radisson Hotel Salt Lake City</h2>
    <p>215 West South Temple<br>
      $129 USD—standard room<br>
      $139/$149 USD—triple/quad
    </p>
  </div>
</li>    
</ul>

And a good example of what I'm trying to accomplish can be found here

I've referenced this post as well and have tried the suggested solutions.

Where am I going wrong? Thanks for your help!

3
  • Cannot reproduce: sassmeister.com/gist/1763036618303d481951
    – cimmanon
    Sep 30, 2014 at 16:37
  • As @cimmanon has said your code seems to work as expected. Please, show us the extract of your CSS output. Sep 30, 2014 at 16:50
  • Thanks @cimmanon, and Alex Guerrero. You're right. I narrowed it down some more and edited the original question. Sep 30, 2014 at 17:42

1 Answer 1

1

Your logic is incorrect. The :nth-of-type(n) selector is for sibling elements. None of your h2 elements are siblings of each other. It is the li elements that are siblings, which the h2 elements are descendants of:

@for $i from 1 to length($colors) {
  li:nth-of-type(#{$i}) h2 {
    $color-from-list: nth($colors, $i);
    color: $color-from-list;
  }
}

http://sassmeister.com/gist/0b0c4793f58bc457c148

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.