Zoltán Tamási Zoltán Tamási - 4 months ago 23
Less Question

Is there a way to group selectors?

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?

Answer

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;
}