Does CSS :not() Selectively Target Distant Descendant Elements?

Can the CSS :not() Selector Target Distant Descendants?

The CSS3 :not() pseudo-class is intended for excluding elements that match a specified selector. It has limited support for targeting distant descendants.

Implementation and Support

The :not() selector has partial implementation in modern browsers, but its support for targeting distant descendants is limited. It primarily operates on direct children of an element.

Behavior with Distant Descendants

In your example, the :not(p) selector does not affect the

element inside the

, even though it is a descendant of the

. This is because :not() only negates the immediate child selector. The

element matches the :not(p) criteria and its color is set to red. Subsequently, the

element inherits this color from its parent

.

Expected Behavior vs. Actual Behavior

You expected the

element to remain unaffected by the :not() selector, but it inherited the color change. This is not the intended behavior for targeting distant descendants.

Solution

To specifically style only

elements within a

, you should use a more direct selector:

div p {
    color: black;
}

Copy after login

Enhancements in CSS Selectors Level 4

CSS Selectors Level 4 proposes extending :not() to accept complex selectors with combinators. This would allow you to target distant descendants with greater flexibility. Once implemented, you could write selectors like:

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

Copy after login

This selector would target all

elements that are not direct descendants of a

.

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

source：php.cn

Previous article：How Can I Make Images Responsively Resize with Only CSS? Next article：How to Always Display the Vertical Scrollbar in WebKit Browsers?

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

Latest Articles by Author

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2166

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2315

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1950

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1828

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1880

Related Topics

More>

• How to insert pictures in css
• How to solve 500 internal server error
• How to solve unrecognized usb device
• WeChat Moments cannot be refreshed
• How to modify element.style
• How to get data in html
• Why does the printer not print?
• What is system software