How to specify a selector for a younger brother in Less?

Question

I have the following rule less:

.menu-link { & + .menu-link { border-left: 1px solid #000; } } 

It works fine, but it looks ugly, because if my menu-link class changes, than I need to replace it with two places.

Is there a way to simplify the rule above?

Answer 1

LESS - Parental Control Selector

The & operator represents the parent selectors of a nested rule and is most often used when applying a modifying class or pseudo-class to an existing selector.

Since & represents the parent, you can simply use & + & :

 .menu-link { & + & { border-left: 1px solid #000; } } 

.. which compiles to:

 .menu-link + .menu-link { border-left: 1px solid #000; } 

---

As a side note, & refers to the entire parent selector. Thus, if you should use the following:

 .parent { .menu-link { & + & { border-left: 1px solid #000; } } } 

.. he would compile the unwanted result:

 .parent .menu-link + .parent .menu-link { border-left: 1px solid #000; } 

So you just need to hold your selectors and use

 .menu-link { & + & { border-left: 1px solid #000; } }