Exclude overwritten classes for an element in LESS - html

Question

Mechanism I have to work with, that is not changable:
Page is rendered with some styles on them eg. class xy.
Some html is generated dynamically and injected into:
<div id="InternalContent"> /* injected here */ </div>
by CSS is applied by doing:
#InternalContent {
/* .less files here */
}
The goal is to be able to render some elements inside #InternalContent with original classes, not overwritten by #InternalContent.
I tried:
#InternalContent:not(.NotInherited) { ... }
#InternalContent:not(*:not(.NotInherited)) { ... }
and some others, but to no success.
The only way this works is if the classes themself have :not(.NotInherited).
#InternalContent .xy:not(.NotInherited) { }
but in my case there are far to many classes to change manually for this to be an acceptable solution.
Smallest (not) working example:
https://jsfiddle.net/nvhouq1k/
HTML:
<p class="xy">This to be orange</p>
<div id="InternalContent">
<p class="xy">This to be blue</p>
<div class="NotInherited">
<p class="NotInherited xy">This to be orange</p>
</div>
</div>
CSS:
.xy {
color: orange;
}
#InternalContent:not(*:not(.NotInherited)) .xy{
color: blue;
}
/* *:not(.NotInherited) */
/* :not(.NotInherited) */

Answer 1

Change the order of your not() selector so that it only targets .xy elements: You can try the following:
.xy {
color: orange;
}
#InternalContent .xy:not(.NotInherited) {
color: blue;
}
<p class="xy">This to be orange</p>
<div id="InternalContent">
<p class="xy">This to be blue</p>
<div class="NotInherited">
<p class="NotInherited xy">This to be orange</p>
</div>
</div>