CSS :not selector behavior [duplicate] - css

Question

This question already has answers here:
Is the CSS :not() selector supposed to work with distant descendants?
(2 answers)
Closed 6 years ago.
Using CSS, I'm trying to target all ul elements inside the #include element, except for the ones inside the #exclude element. Here's the markup:
<div id="include">
<ul><li>Include List</li></ul>
<div id="exclude">
<ul><li>Exclude List</li></ul>
</div>
</div>
I thought I could do this using the :not CSS selector like this:
#include :not(#exclude) ul {
color: blue !important;
}
The result I'm seeing is that neither ul gets the blue color. Clearly I am misunderstanding how this :not selector works. Is what I'm trying to do possible? Here's a fiddle:
https://jsfiddle.net/flyingL123/gmpLgx4y/

Answer 1

You need to use the > operator. This gets the immediate children of the element preceding. This will then get the ul immediately descending from #include. Updated:
JSFiddle
Updated code:
#include > ul {
color: blue !important;
}
You would not be able to to implicitly set styles by inheritance. They don't exclude ancestors because they don't trickle down. You will need to add new rules for other elements like so:
#include ul {
color: blue;
}
#exclude ul {
color: black;
}
Fiddle: Here