:not() pseudo class example only works in Safari

Question

I thought this was a straightforward use of the :not() pseudoclass, but it doesn't seem to work in most browsers, so I made a codepen about it.

Demo example

.YYY:not(.ZZZ .YYY) {}

---

Updated

Need solution for the below css rule

.YYY:not(.AAA + .YYY) {}

Answer 1

Here's what I gather, somebody correct me if I misunderstand something.

TLDR: According to the spec, :not(X) accepts as argument a simple selector which is different from a sequence of simple selectors. Thus, it's not even supposed to work, and Safari is just going against the spec.

---

Spec: https://drafts.csswg.org/selectors-3/#negation

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

Spec: https://drafts.csswg.org/selectors-3/#simple-selectors-dfn

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Combinators are: whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.

The elements of a document tree that are represented by a selector are the subjects of the selector. A selector consisting of a single sequence of simple selectors represents any element satisfying its requirements. Prepending another sequence of simple selectors and a combinator to a sequence imposes additional matching constraints, so the subjects of a selector are always a subset of the elements represented by the last sequence of simple selectors.

Note the difference between talking about a simple selector and a sequence of simple selectors.

Spec: https://drafts.csswg.org/selectors-3/#changesFromCSS2

the list of basic definitions (selector, group of selectors, simple selector, etc.) has been changed; in particular, what was referred to in CSS2 as a simple selector is now called a sequence of simple selectors, and the term "simple selector" is now used for the components of this sequence

Answer 2

Alternatively you can use this css rule which serves the purpose

.YYY {
  font-size: 24px;
  text-align: center;
}

 *:not(.ZZZ) > .YYY {
  color:red;
}

Here is the codepen link

Answer 3

According to the CSSWG draft, the negation pseudo-class accepts a simple selector as its parameter.

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

.ZZZ .YYY is a selector but not a simple selector, so using it as a parameter for the negation pseudo-class is not supported. Some browsers such as Safari may support it nevertheless, but we shouldn't count on it.