1

Есть например примитивное меню в котором есть разделители в виде вертикальных полос. Я делаю это с помощью бордера вот так

.navbar
max-width: 725px
float: left
background: transparent
border: none
&__li:not(:last-child)
    border-right: 1px solid white

А вот код меню

        <ul class="nav navbar-nav">
          <li class="navbar__li active"><a class="navbar__link" href="#">О нас</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Наши услуги</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Отзывы</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Акция</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Контакты</a></li>
        </ul>

А если я захочу подействовать на допустим на ссылку в последнем элементе li как мне поступить? Это может понадобиться если я этот разделитель буду задавать не в li, а в самой ссылке a. Ну или я например буду писать стиль чего либо.

На пример модального окна

.modal-green
  &__button
    background: green
  &__link
    color: green
6
  • 1
    А можете чётко сформулировать именно вопрос? Желательно в заголовке. Потому что я не понимаю, что вы хотите спросить. 23 дек 2016 в 6:30
  • я захочу подействовать на допустим на ссылку в последнем элементе li как мне поступить?
    – burn
    23 дек 2016 в 7:41
  • Что значит подействовать на ссылку? 23 дек 2016 в 7:44
  • задать стиль для ссылки
    – burn
    23 дек 2016 в 7:57
  • Это же у вас не чистый CSS, а какой-то препроцессор. Добавьте метку о нём. 23 дек 2016 в 8:45

1 ответ 1

1

Если с бэм, то можно так:

<ul class="nav navbar-nav">
  <li class="navbar__li active"><a class="navbar__link" href="#">О нас</a></li>
  <li class="navbar__li"><a class="navbar__link" href="#">Наши услуги</a></li>
  <li class="navbar__li"><a class="navbar__link" href="#">Отзывы</a></li>
  <li class="navbar__li"><a class="navbar__link" href="#">Акция</a></li>
  <li class="navbar__li navbar__li_last"><a class="navbar__link" href="#">Контакты</a></li>
</ul>

Т.е. добавить последнему элементу модификатор navbar__li_last и его стилизовать.

Либо использовать &__li:last-child:

.navbar
...
&__li
    border-right: 1px solid white
&__li:last-child
    border-right: none

При этом всем лишкам Вы задаете необходимые стили, а последнему элементу уже или отменяете или задаете свои стили, соответственно и для ссылки внутри лишки.

Пример для ссылки:

&__li:last-child
  a
    border: none

или

<li class="navbar__li"><a class="navbar__link navbar__link_last" href="#">Контакты</a></li>

navbar__link_last
  border: none

+ поддержка Вашего :not(), может быть это плохая идея использовать его!

5
  • все это я реализовал с помощью &__li:not(:last-child) border-right: 1px solid white
    – burn
    23 дек 2016 в 8:18
  • Тогда в чем вопрос?!
    – SVE
    23 дек 2016 в 8:19
  • все это я реализовал с помощью &__li:not(:last-child) border-right: 1px solid white но вопрос в том чтобы подействовать именно на ссылку. Но в принципе если дать ей модификатор __link_last но в принципе это наверное какое-то решение. Будем считать вопрос закрытым) Блин много документации по БЭМ а примеров не очень много)
    – burn
    23 дек 2016 в 8:21
  • бэм на сколько я понял не допускает вложености
    – burn
    23 дек 2016 в 8:48
  • Добавила же и для бэм navbar__link_last border: none
    – SVE
    23 дек 2016 в 8:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.