Nested pseudo selectors with Sass

Question

My HTML looks like

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="header"></div>
        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

      </div>
    </div>
  </div>

This is a list of circular bullet points with pictograph icons inside of them. Although you can't tell from the way I posted it the:

<div class="feature-bullet">
   <div class="feature-icon"></div>
</div>

is being rendered by a single rails partial all four times therefore I cant throw extra classes on certain bullets to change their attributes.

For whatever reason, the feature-icon 's inside the top two bullet point are off center and I want to select them with CSS pseudo selectors and give them some extra margin. SO what I need to do is take the second and third children of modal-content and pick each of their div.feature-icon s and throw a margin attribute on them.

My inital non working .scss was:

.modal-content {
  &:nth-child(2), &:nth-child(3) {
    .feature-icon {
      margin-left: 10px;
    }
  }
}

But I quickly realized

1. I dont really understand the rules for using these nth-child pseudo selectors in the first place and
2. I especially have no idea what other factors come into play when nesting them in Sass selectors.

So is this possible? If so what options do I have. Also if there is any good documentation on this sort of issue I would be interested to see it but I couldn't find it.

Answer 1

If you don't understand the rules of the selectors, where did you get the CSS from? Just curious.

a.) The rule is saying, for the 2nd and 3rd .modal-content, apply a left margin of 10px on the .feature-icon if one is there.

b.) When nested, those selectors will ONLY work in those instances. If you have another .feature-icon in say something with a class of .yellowBox, instead of .modal-content, it will not get the left margin. Nesting allows for quicker styling and gives your styles structure, but makes your selectors VERY specific the further in the nesting goes.

EDIT: After further review, there will only be one .modal-content, you probably want this:

.modal-content {
    .feature-bullet {
         &:nth-child(2), &:nth-child(3){
           .feature-icon{
              margin-left: 10px;
      }
    }
  }
}

The way you have your SASS right now, it says look for the 2nd and 3rd .modal-content, but there will only be one for the modal. Instead, you want to look for the 2nd and 3rd .feature-bullet, and apply the margin to the .feature-icon within those.