2

Is it possible to target outer ("great-grand-")"Parent" HTML elements in LESS files where there are div elements nested inside of span elements interchangeably?

For example:

<div class="parent1 class1 class2">Parent shape
  <span class="parent2">
    <div class="parent3">      
      <div class="parent4 some-other-class">
         Some content.... 
      </div>
    </div> 

  </span>
</div>

What I want to achieve is to apply styling for FIRST div element which has ".parent1 class1 class2" classes when most deeply nested div element has these classes ".parent4 some-other-class" applied to it.

IMPORTANT NOTES:

  1. By default MOST deeply nested div element has only .parent4 class applied to it
  2. Styling should be applied to top-PARENT div element which has following parent1 class1 class2 classes applied to it
  3. Styling for TOP-PARENT div element should be applied IF AND ONLY IF some-other-class class is appended to most deeply nested DIV (i.e. when it's <div class="parent4 some-other-class">)

This is what I have in .less file for now:


.parent1{
  &.class1.class2{
    div.parent.some-other-class & div.parent3 & span.parent2 {
      //css styling applied for `div.parent1.class1.class2`
    }
  }
}

...but it's NOT working. BTW, ALL selectors must be inside of .parent1 class in LESS file -> that means .less file must be like this:

.parent1{
   // ALL other selectors (e.g. `.parent2` , `.parent4.some-other-class` ) are inside of this block!
}

...and NOT like this:

.parent1{
  /* styling */
}

.parent4.some-other-class{
  /* styling */
}

This is most similar Q&A related to this question, but it's for most trivial case where there is single parent and single child element.

Any help/advice is greatly appreciated.

NikolaS
  • 503
  • 2
  • 8
  • 20

0 Answers0