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:
- By default MOST deeply nested
div
element has only.parent4
class applied to it - Styling should be applied to top-PARENT
div
element which has followingparent1 class1 class2
classes applied to it - Styling for TOP-PARENT
div
element should be applied IF AND ONLY IFsome-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.