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!