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

Is the CSS :not() Selector Intended for Distant Descendants?

The CSS3 :not() pseudo-class, as described in the official documentation at http://www.w3.org/TR/css3-selectors/#negation, is designed to match elements that do not match a given selector. However, users have found limited functionality in its use with distant descendants.

Consider the example:

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

While this selector works when

is a direct child of

, it fails when

is a more distant descendant. This behavior is intentional, as :not() only negates the immediate descendants of the target element.

In the case where

contains a

, it is the

itself that matches *:not(p) and inherits the style. The

element itself still counts against the negation, inheriting the text color from its parent.

To overcome this limitation, targeting

elements directly is recommended:

p { color: black; }

Selectors Level 4 proposes enhancing :not() to accept full complex selectors containing combinators, allowing for more specific descendant targeting. However, this feature is still in the implementation phase.

The above is the detailed content of Does CSS `:not()` Selectively Target Only Immediate 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