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

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

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!