Does CSS :not() Selectively Exclude Distant Descendants?

Distance Descendants and the CSS :not() Selector

The CSS3 :not() pseudo-class is designed to negate a specific selector match. It has been widely implemented across browsers. However, one common misconception surrounding this selector is its applicability to distant descendants.

While :not() successfully negates matches for direct child elements, it does not behave as expected for more distant descendants. As illustrated in the example provided:

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

In this snippet, the

element is still inheriting the red color from its parent

, even though it is not a direct descendant of the

. This occurs because :not() only directly negates the match for that element, not its descendants.

The documentation for :not() in both CSS3 and CSS Selectors Level 4 does not explicitly address this behavior. However, it has been confirmed that this behavior is intentional, and the selector is not meant to support grand-children matching.

Solution

To achieve the desired result of excluding distant descendants from the :not() match, a different method must be employed. One common approach is to specify a color for the specific element you want to exclude, overwriting any inherited values:

div {
  color: red;
}

div p {
  color: black;
}

CSS Selectors Level 4 Enhancement

CSS Selectors Level 4 proposes an enhancement to the :not() selector, allowing the use of more complex selectors within it. This change will enable the following syntax to correctly negate descendants:

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

While this enhancement is not yet widely implemented in browsers, it provides a promising solution for matching and negating distant descendants using :not().

The above is the detailed content of Does CSS :not() Selectively Exclude Distant Descendants?. For more information, please follow other related articles on the PHP Chinese website!