CSS :not on the parent does not work for descendant selectors but it does for child selectors, unless you explicitly specify the parent element type

Question

HTML:

<div id="outer">
    <div class="c1">
        c1 should be black
    </div>
    <div class="c2">
        c2 should be black
    </div>
    <div class="c3">
        c3 should be black
    </div>
</div>
<div id="somethingelse">
    <div class="c1">
       c1 should be red
    </div>
    <div class="c2">
        c2 should be red
    </div>
    <div class="c3">
        c3 should be red
    </div>
</div>

CSS:

:not(#outer) .c1 {
    color: #ff0000;
}

div:not(#outer) .c2 {
    color: #ff0000;
}

:not(#outer) > .c3 {
    color: #ff0000;
}

With c1, I have a descendant rule that does not include the parent element type. With c2, I have a descendant rule that does include the parent element type. With c3, I have an immediate child rule that does not include the parent element type. Only c2 and c3 work as intended. Why?

score 7 · Accepted Answer · answered Aug 21 '15 at 00:19

:not(#outer) .c1 means: select all elements with class c1 and which are descendants of an element which doesn't have the ID outer.

This matches your first element, because it has class c1, and is a descendant of body, which doesn't have the ID outer.

Instead, div:not(#outer) .c1 means: select all elements with class c1 and which are descendants of a div element which doesn't have the ID outer. This doesn't match the second element, because all its ancestors either aren't div elements or have the ID outer.

Fianlly, :not(#outer) > .c1 means: select all elements with class c1 and which are a child of an element which doesn't have the ID outer. This doesn't match the third element, because its parent has the ID outer.

CSS :not on the parent does not work for descendant selectors but it does for child selectors, unless you explicitly specify the parent element type

1 Answers1