How to select nth-child inside Element BEM Scss

Question

I am using BEM Scss explain please how to select inside nth-child element.

I tried below format but it didn't work for me

<div class="bookearly-container" >
    <div class="row bookearly-container__row">
        <div class="col-xs-12 col-md-4 bookearly-container__col">
            <div class="bookearly-container__discountcontainer">
            </div>
            <div class="bookearly-container__discountcontainer">
            </div>
            <div class="bookearly-container__discountcontainer">
            </div>
        </div>
    </div>
</div>

MY BEM Scss I added nth-child 3rd element children element that is not working:

.bookearly-container {
    &__row {
        margin-bottom: 4.6rem;
        & > :nth-child(3) {
            &__discountcontainer {  -- this element not selected
                &:before {
                    display: none;
                }
            }
        }
    }
}

Can you please explain how to select? Thanks in advance.

Have you looked at you generated css? the compiled selector looks like: `.bookearly-container__row > :nth-child(3)__discountcontainer:before{}` — anderssonola, Oct 04 '18 at 09:41
So `&__discountcontainer` is supposed to be an element of `.bookearly-container` ? — anderssonola, Oct 04 '18 at 09:43
Possible duplicate of [How do you write the shorthand for a nested class that has already been declared in SASS / SCSS?](https://stackoverflow.com/questions/52400435/how-do-you-write-the-shorthand-for-a-nested-class-that-has-already-been-declared) — anderssonola, Oct 04 '18 at 09:44

score 2 · Accepted Answer · answered Oct 05 '18 at 08:31

You are using the child combinator (>) inside .bookearly-container__row(line 4 in your CSS example), and the only direct child there is .bookearly-container__col.

If you want to target the .bookearly-container__discountcontainer elements you need to adjust the selector nesting a bit.

Try using the @debug directive combined with the & selector to see what you are actually selecting, it's helpful when you get no other clues.

This is a straight-forward suggestion to solve it:

.bookearly-container {
  @debug &; // .bookearly-container

  &__row {
    @debug &; // .bookearly-container__row
  }

  &__discountcontainer:nth-child(3) {
    @debug &; // .bookearly-container__discountcontainer:nth-child(3)

    &:before {
      @debug &; // .bookearly-container__discountcontainer:nth-child(3):before
    }
  }
}

If you are depending on the child combinator (>) for some reason, you could nest it inside a &__col selector, like so:

.bookearly-container {

  &__col {

    // Targeting any class ending with "__discountcontainer"
    & > [class$="__discountcontainer"]:nth-child(3) {

      &:before {
        @debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
      }
    }
  }
}

How to select nth-child inside Element BEM Scss

1 Answers1