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

Does the CSS :not() Selector Extend to Distant Descendants?

The CSS3 :not() pseudo-class allows negation in selectors, excluding elements that match a specified pattern. However, there are limitations to its functionality.

Current Implementation

As described in the CSS3 and CSS Selectors Level 4 documentation, :not() currently only matches direct descendants. In the example provided:

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

This selector targets direct children of

that are not

. Elements that are more distant descendants, even if contained within a

nested within

, will not be affected.

Inheritance and Styling

Inheritance of styling properties can further complicate the behavior of :not(). In the example from the question, the

element within the

inherits the red text color from its parent, even though the

itself matches the :not() selector. This is because the negation is applied to the parent element,

, which meets the specified criteria.

Future Enhancements

CSS Selectors Level 4 proposes extending :not() to include full complex selectors and combinators. This would allow for more granular filtering, enabling selectors such as:

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

Recommendations

Due to the current limitations of :not() and potential confusion with inheritance, it's generally advised to avoid using it for filtering distant descendants. Consider alternative approaches such as using direct selectors or applying specific styling to elements you wish to exclude. Once support for complex selectors in :not() is implemented, this functionality may become more useful.

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1672

14

CakePHP Tutorial

1428

52

Laravel Tutorial

1332

25

PHP Tutorial

1277

29

C# Tutorial

1257

24

Show More