I am facing an issue with styling a div on my webpage. I want to write some less code to style divs with a specific class and all their children.
Below is the simplified HTML:
<div class='people'>
<div>
<!--This text should be green-->
Bob
</div>
<div>
<!--This text should be green-->
Geoff
</div>
<div class="ex-members">
<div>
<!--This text should remain red-->
Mary
</div>
<div>
<!--This text should remain red-->
Fred
</div>
</div>
</div>
This is the less code I have been trying to implement:
body {
color:red;
}
.people {
&:not(.ex-members) {
color:green;
}
}
However, it seems that this code is setting all names to green instead of excluding the ones with the 'ex-members' class.
Note that I could solve this by just overwriting the green color and setting 'ex-members' back to black, but I am looking for a solution without using this method if possible.