Does CSS `:not()` Selectively Target Only Immediate Descendants?-CSS Tutorial-php.cn

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

Patricia Arquette

Release： 2024-12-03 05:26:10

Original

798 people have browsed it

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

Copy after login

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; }
Copy after login
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!