Как выбрать nth-child внутри Element BEM Scss - PullRequest
Новая
       39

Как выбрать nth-child внутри Element BEM Scss

0 голосов
/ 04 октября 2018

Я использую BEM Scss, объясните, пожалуйста, как выбрать внутри элемента nth-child.

Я пробовал формат ниже, но он не работал для меня 

<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>

МОЙ BEM Scss Iдобавлен nth-child 3-й элемент дочерний элемент, который не работает: 

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

Не могли бы вы объяснить, как выбрать?Заранее спасибо.

1 Ответ

0 голосов
/ 05 октября 2018

Вы используете дочерний комбинатор (>) внутри .bookearly-container__row (строка 4 в вашем примере CSS), и единственный прямой дочерний элемент - .bookearly-container__col.

Если вы хотите нацелиться на.bookearly-container__discountcontainer элементов, которые вам нужно отрегулировать, немного вкладывая селектор.

Попробуйте использовать директиву @debug в сочетании с селектором &, чтобы увидеть, что вы на самом деле выбираете, это полезно, когда у вас нет других подсказок.

Это прямое предложение для его решения: 

.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
    }
  }
}

Если вы по какой-то причине зависите от дочернего комбинатора (>), вы можете вложить его в&__col селектор, вот так: 

.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
      }
    }
  }
}
...