flyingL123 flyingL123 - 5 months ago 11
CSS Question

CSS :not selector behavior

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

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

Comments