LESS CSS - Not reinventing the wheel

Question

By “wheel” I mean the nested selector path.

I’ve converted a somewhat large CSS file to LESS for the most part, nesting rules in DOM order. However, some of my styles are being overridden. Basically, all of the “plain” styles have been nested making their output CSS rules extremely specific (which I want). What’s not so specific are the rules where the parent elements have classes attached. Example:

Regular nested rules:

.grandparent {
  some: style;

  .parent {
     other: style;

     .child {
       you: get;

       .grandchild {
          the: picture;
       } 
     }
   }
}

So, the issue I’m having is adding styles to the grandchild if the grandparent has a specific class attached. Something like:

.grandparent.visiting .grandchild {
  visibility: hidden;
}

Is there a way to neatly add .visiting to the big hierarchy I’ve already built? Or do I have to redo the entire nesting order for all the child element selectors affected by .grandparent.visiting?

Not sure if this a noob thing. I just started with LESS a couple weekends ago. But I can’t seem to find any solutions using :not and the & selector (as superb as it is) doesn’t seem to help here either.

Answer 1

You can reference the current selector using the & symbol, then write selectors after it as it was in one line.

.grandparent {
  some: style;

  &.visiting {
    .grandchild{ 
        visibility: hidden;
    }
  }
}