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!

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