Is the CSS :not() selector supposed to work with distant descendants?

Viewed 2828

Here is the official documentation for the CSS3 :not() pseudo-class:
http://www.w3.org/TR/css3-selectors/#negation
and the proposed CSS Selectors Level 4 enhancement:
http://dev.w3.org/csswg/selectors4/#negation

I've been searching the implementation and browser support for :not(), but the only examples I found were with a single element or with a direct child of an element, e.g.:

div *:not(p) { color: red; }

The example above works when <p> is a direct child of <div>, but it does not work when <p> is a more distant descendant of <div>.

div :not(p) {
    color: red;
}
<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

If the answer is in the official documentation above, then I didn't find/understand it. As I said, I have searched this site and the web but couldn't find any discussion about the support or lack thereof of :not() as grand-children of another element.

Is this supposed to work like I think it should?

2 Answers
Related