How to exclude a class with all children in style definition
You cannot reliably use the :not()
selector in CSS for excluding an element and/or its descendants. The reason for it is explained in this answer (and some others that it links to):
You can't use combinators. This works in jQuery, but not CSS:
/* * Grab everything that is neither #foo itself nor within #foo. * Notice the descendant combinator (the space) between #foo and *. */ :not(#foo, #foo *)
This one is particularly nasty, primarily because it has no proper workaround. There are some loose workarounds (1 and 2), but they usually depend on the HTML structure and are therefore very limited in utility.
And since your markup is unpredictable enough that you cannot edit it or use the >
selector, I'm afraid there's not much of a way out for you other than to either find a way to apply a class to your top div
and use that class, as demonstrated by Fluidbyte, and/or use jQuery, as implied above.