Target first level <li> by using LESS nested rules with BEM

HTML & CSS
1

I have the following HTML:

<ul class="header-menu">
    <li class="header-menu__item"><a href="index.html">home</a></li>
    <li class="header-menu__item header-menu__item--split"><a href="menu.html">menu</a></li>
    <li class="header-menu__item">
        <a href="#">features</a>
        <ul class="header-menu--dropdown">
            <li><a href="menu.html">Menu</a></li>
        </ul>
    </li>
</ul>    <!-- end header-menu -->

I have this css, is it possible to do something like this in less:

.header-menu{}
    .header-menu .header-menu__item{}
    .header-menu > .header-menu__item{}

I would write it in LESS with BEM like this:

.header-menu{
    &__item{
        display: inline-block;
        float: left;
    }

    > &__item{ // How can I target first <li>(s) here
    }
}

How can I apply a CSS rule to the first <li> level? Tried > &__item but it doesn’t seem to work.

2 
.header-menu{
    &__item{
        display: inline-block;
        float: left;
    }

    > &__item{ // How can I target first <li>(s) here
    }
    li:first-child{}
}

Does that work?

Disclaimer: I’m unfamiliar with BEM

3

Hi @bpartch

It won’t work because I want to target first level not first child.

4

Oops, my mistake, I get what you are trying to do now. (i think) hang on a second, let me experiment. :stuck_out_tongue:

5 
.header-menu{
  &__item{
    display: inline-block;
    float: left;
  }

  & > &__item{
    margin-right:100px;
  }
}

? :smile:

1 Like
6

no maybe not, LOL, not my morning. LOL

7

Thank you so much. It’s totally solved my issue :smile: You rock :smiley:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.