1

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/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
flyingL123
  • 7,686
  • 11
  • 66
  • 135

1 Answers1

2

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

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
  • This was just some sample code. On my real project the `ul` is not the immediate child. I want to target all `ul`'s within `#include` that are not within `#exclude` regardless of their depth. Is this not possible? – flyingL123 Jun 29 '16 at 16:15
  • Edited @flyingL123 – Andrew Li Jun 29 '16 at 16:20
  • Yes, I see now from the docs for `:not` that this probably isn't possible the way I want to do it. `:not` doesn't trickle down to ancestors. – flyingL123 Jun 29 '16 at 16:21
  • It doesn't. That's why it's not used for excluding ancestors. @flyingL123 – Andrew Li Jun 29 '16 at 16:22