Is there a way to group selectors?

Question

I'm trying to address all the div, table, ul, dl, etc. children of a selector using LESS.

I would love to write something like this.

.myclass {
  ...

  &.otherClass > (div, ul, dl, table) {
    // define some rules...
  }
}

I would expect the following output.

.myclass.otherClass > div,
.myclass.otherClass > ul,
.myclass.otherClass > dl,
.myclass.otherClass > table {
  // rules
}

But the parenthesis seems like not supported, as it compiles as is, resulting an invalid CSS of course.

Is there any syntax or other way to have such a shortcut in definitions?

Is it all children or just a few selected tag types? ... or maybe all but one tag type? — Asons, Jul 28 '16 at 08:56
Asked as you could do `.myclass.otherClass > * { ... }` or maybe `.myclass.otherClass > :not(li) { ... }` which might give you shorter code — Asons, Jul 28 '16 at 09:02

Randy · Accepted Answer · 2016-07-28T08:51:22.523

2

Your solution:

.myclass {
  ...

  &.otherClass {
    > div, > ul, > dl, > table {
         // define some rules...
    }
  }
}

As for your comment, removing the > selector after the first selector, will produce a different result:

This example

div {
    > span, p, a {
     border:1px solid #333;
    }
}

compiles into

div > span, div p, div a {
    border: 1px solid #333;
}

while this example

div {
    > span, > p, > a {
     border:1px solid #333;
    }
}

compiles into

div > span, div > p, div > a {
    border: 1px solid #333;
}

edited Jul 28 '16 at 08:51

answered Jul 28 '16 at 08:35

Randy

Ok, so basically there is no way to group things like I wanted, and the shortest syntax is to nest another level. I'll accept your answer though, thank you. – Zoltán Tamási Jul 28 '16 at 08:53

score 1 · Answer 2 · answered Jul 28 '16 at 09:23

Another solution similar to randy's answer is use a variable for .otherClass and >:

@selector: .otherClass >;

.myclass {
  display:block;
  &@{selector} {
    div, ul, dl, table {
      color:red
    }
  }
}

2 Answers2