Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?-CSS Tutorial-php.cn

Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?

Mary-Kate Olsen

Release： 2024-12-01 19:44:15

Original

472 people have browsed it

Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?

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

The CSS3 :not() pseudo-class allows negation in selectors, excluding elements that match a specified pattern. However, there are limitations to its functionality.

Current Implementation

As described in the CSS3 and CSS Selectors Level 4 documentation, :not() currently only matches direct descendants. In the example provided:

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

Copy after login

This selector targets direct children of

that are not

. Elements that are more distant descendants, even if contained within a

nested within

, will not be affected.

Inheritance and Styling

Inheritance of styling properties can further complicate the behavior of :not(). In the example from the question, the

element within the

inherits the red text color from its parent, even though the
itself matches the :not() selector. This is because the negation is applied to the parent element,
, which meets the specified criteria.

Future Enhancements

CSS Selectors Level 4 proposes extending :not() to include full complex selectors and combinators. This would allow for more granular filtering, enabling selectors such as:
p:not(div p) {
  color: red;
}
Copy after login
Recommendations

Due to the current limitations of :not() and potential confusion with inheritance, it's generally advised to avoid using it for filtering distant descendants. Consider alternative approaches such as using direct selectors or applying specific styling to elements you wish to exclude. Once support for complex selectors in :not() is implemented, this functionality may become more useful.
The above is the detailed content of Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：Why Isn't My CSS3 Animation Working in Safari? Next article：How Can I Automatically Add Spacing Between Bootstrap Columns?

Statement of this Website

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