flyingL123 flyingL123 - 1 year ago 88
CSS Question

CSS :not selector behavior

Using CSS, I'm trying to target all

elements inside the
element, except for the ones inside the
element. Here's the markup:

<div id="include">
<ul><li>Include List</li></ul>
<div id="exclude">
<ul><li>Exclude List</li></ul>

I thought I could do this using the
CSS selector like this:

#include :not(#exclude) ul {
color: blue !important;

The result I'm seeing is that neither
gets the blue color. Clearly I am misunderstanding how this
selector works. Is what I'm trying to do possible? Here's a fiddle:

Answer Source

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:


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download