LESS add a whitespace on nth-child selector

Question

I currently have this lees code:

.myclass{
    display:inline-block;
    overflow: auto;
    & li{
        display: none;
        &:nth-child(1),:nth-child(2),:nth-child(3){
            display:inline-block;
        }
    }
}

And as you can see what i want is that only show me the first three li elements, the rest will be displayed as none. But the compile make this Output:

.myclass{
    display:inline-block;
    overflow: auto;
}
.myclass li{
    display: none;
}
.myclass li:nth-child(1),
.myclass li :nth-child(2),
.myclass li :nth-child(3) {
    display: inline-block;
}

As you can see there is a whitespace in :nth-child(2) and :nth-child(3) so only the first child is working right.

How can i delete this whitespace?

Answer 1

Your problem here is that you're only using LESS's immediate parent selector (&) on the first :nth-child declaration and not on the other two. It becomes obvious to see that if we put a line break between each of the declarations:

&:nth-child(1),
:nth-child(2),
:nth-child(3){
    display:inline-block;
}

To fix this, you simply need to place that & before the other two :nth-child declarations:

&:nth-child(1),
&:nth-child(2),
&:nth-child(3){
    display:inline-block;
}

---

Furthermore, you don't need the & before the li selector:

.myclass {
    li {
        ...
    }
}