Home >Web Front-end >CSS Tutorial >Does CSS `:not()` Selectively Target Only Immediate Children and Grandchildren?

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

Susan SarandonOriginal: 2024-12-14 18:57:23349browse

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!
css css3 for while class default this
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Generate CSS Color Shades Using Only CSS Variables?Next article：How Can I Generate CSS Color Shades Using Only CSS Variables?

See more

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

Related articles