5

This LESS:

.parent {
  .child {
    h1& {
      color: red;
    }
  } 
}

Compiles to:

h1.parent .child {color:red};

What I need is:

.parent h1.child {color:red};

Suggestion appreciated.

My question is similar to the question Less Immediate Parent Selector but not quite the same. As the selector is composed from the element and class name. The question is about how to qualify the class name with its element without affecting the root selector.

Community
  • 1
  • 1
Blix
  • 289
  • 2
  • 17

1 Answers1

0

This will work for this specific example. Although I appreciate it doesn't answer your general question.

.parent {
   h1 {
    &.child {
      color: red;
    }
  } 
}
GeekyMonkey
  • 12,478
  • 6
  • 33
  • 39