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

Does the :not() Selector Extend to Distant Descendants?

In CSS3, the :not() pseudo-class provides a way to exclude certain elements from a selector. However, its behavior can be confusing when dealing with distant descendants.

Current Implementation

According to the official documentation and browser support analysis, the :not() selector only applies to direct children or grandchildren of the targeted element.

Consider this example:

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

This rule will style all direct children or grandchildren of

that are not

elements.

However, the :not() selector does not extend beyond grandchildren.

The Issue

In this example, the

element is not a direct child or grandchild of

:

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

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

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!