CSS :not selector behavior

Question

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

CSS :not selector behavior

Sign up