Gaurav Aggarwal Gaurav Aggarwal - 2 months ago 18
CSS Question

Less css selector issue

I am using less css and trying to use & for combining multiple selectors. I have created a dummy environment to elaborate the issue.

HTML

<div class="ampuse">
<p>This is first</p>
<p>This is second</p>
<div>This is div 1</div>
<p>This is Third</p>
<em>This is em</em>
<div>This is div 2</div>
<div>This is div 3</div>
</div>


LESS

.ampuse{
p,div{
color: red;
&+&{
background: yellow;
color: blue;
}
}
}


Now according to less rules this will create the css like this

.ampuse p,
.ampuse div {
color: red;
}

.ampuse p + .ampuse p,
.ampuse p + .ampuse div,
.ampuse div + .ampuse p,
.ampuse div + .ampuse div {
background: yellow;
color: blue;
}


But i want to render the parent only once and then selector should work under children element. This is the css i want

.ampuse p,
.ampuse div {
color: red;
}

.ampuse p + p,
.ampuse p + div,
.ampuse div + p,
.ampuse div + div {
background: yellow;
color: blue;
}


Can anyone help me how to achieve it with less?

Answer

Answer to accept as stated in my comment, use & + p, & + div

.ampuse{
    p,div{
        color: red;

        + p,
        + div {
            background: yellow;
            color: blue;
        }
    }
}
Comments