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

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!