CODEWITHSUNDEEP
csscss-selectorsless
Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

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?

Upvotes: 1

Views: 63

Answers (2)

Justinas
Justinas

Reputation: 43557

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

.ampuse{
    p,div{
        color: red;

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

Upvotes: 0

R Reveley
R Reveley

Reputation: 1584

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

Makes

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

Upvotes: 2

Related Questions