Example
You may also extend nested selectors. The below Less
.otherChild{
color: blue;
}
.otherParent{
color: red;
.otherChild{
font-size: 12px;
color: green;
}
}
.parent{
.nestedParagraph{
&:extend(.otherParent .otherChild);
}
}
Will compile to
.otherChild {
color: blue;
}
.otherParent {
color: red;
}
.otherParent .otherChild,
.parent .nestedParagraph {
font-size: 12px;
color: green;
}
With the following html
<div class="otherParent">
Other Parent Words
<div class="otherChild">
Other Nested Words
</div>
</div>
<div class="parent">
Parent Words
<div class="nestedParagraph">
Nested Words
</div>
</div>
The result is
The font color for the nested paragraph is green, not blue! This shows we can extend nested selectors!
