How to deal in this case with BEM inheritance in Less?

Question

css

Good afternoon. I use BEM and Less in layout. There is this menu:

<nav class="header-nav">
          <ul class="header-nav__list">						
            <li class="header-nav__item"><a href="/" class="header-nav__link">News</a></li>						
            <li class="header-nav__item"><a href="/" class="header-nav__link">FAQ</a></li>
            <li class="header-nav__item"><a href="/" class="header-nav__link">Contacts</a></li>
          </ul>
        </nav>

.header{
  &-nav{
    &__item{display: inline-block; vertical-align: middle;}
    &__link{padding: 20px 30px;}
  }
}

What is the problem. The first menu item does not have an indent on the left, that is, ideally, you need to end up with .header-nav__item:first-of-type .header-nav__link{padding-left: 0;} But how to write this in Less, so as not to write inside &__item full link class name .header-nav__link?

Answer 1

Try like this:

&__item:first-child &__link {
      padding-left: 0;
}

PS In your case, first-child is better. Read about first-child && first-of-type