Does CSS `:not()` Selectively Target Only Immediate Children and Grandchildren?

<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>

In this case, the

element is matching the *:not(p) condition since it's a descendant of

, while the

element within it inherits the red color.

Solution

The correct behavior is for the

element to remain its default color. To achieve this, the rule should target all

elements directly:

div p { color: black; }

Copy after login

Future Enhancements in CSS Selectors Level 4

The CSS Selectors Level 4 proposal enhances the :not() selector to accept full complex selectors with combinators. This means that we will be able to write selectors like:

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

Copy after login

This extended syntax will allow for more precise targeting of distant descendants.

The above is the detailed content of Does CSS `:not()` Selectively Target Only Immediate Children and Grandchildren?. For more information, please follow other related articles on the PHP Chinese website!