There is for example a primitive menu in which there are dividers in the form of vertical bars. I do it with a border like this

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

And here is the menu code

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

And if I want to act on a valid link in the last li element, what should I do? This may be necessary if I set this delimiter not in li, but in the link itself a. Well, or for example, I will write the style of something.

For example, a modal window

 .modal-green &__button background: green &__link color: green
  • one
    Can you clearly formulate the question? Desirable in the title. Because I do not understand what you want to ask. - Vadim Ovchinnikov
  • I want to act on a valid link in the last li element, what should I do? - burn
  • What does it mean to act on the link? - Vadim Ovchinnikov
  • Set Link Style -
  • This is not pure CSS, but some kind of preprocessor. Add a label about it. - Vadim Ovchinnikov

1 answer 1

If with bam, then you can:

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

Those. add the navbar__li_last modifier to the last element and style it.

Or use &__li:last-child :

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

In this case, all the extras you set the necessary styles, and the last element is already either canceled or set your own styles, respectively, and for the link inside the extra.

Example for reference:

 &__li:last-child a border: none

or

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

+ support your: not () , maybe it is a bad idea to use it!

  • I implemented all this with & __ li: not (: last-child) border-right: 1px solid white - burn
  • Then what is the question ?! - HamSter
  • I implemented all this with & __ li: not (: last-child) border-right: 1px solid white, but the question is to act on the link. But in principle, if you give it the __link_last modifier, but in principle, this is probably some kind of solution. We will consider the question closed) Damn a lot of documentation on BEM and there are not very many examples) - burn
  • Bam as I understand it does not allow nesting - burn
  • Also added for Bam navbar__link_last border: none - HamSter