: not() пример псевдокласса работает только в Safari

Question

Я думал, что это было простое использование псевдослова: not(), но он не работает в большинстве браузеров, поэтому я сделал об этом codepen.

Demo example

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

---

Обновлено

Необходимость решения для the ниже правила CSS

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

Answer 1

Вот что я понимаю, кто-то поправьте меня, если я неправильно что-то.

TLDR: В соответствии со спецификацией, :not(X) принимает в качестве аргумента простого селектора, который отличается от последовательности простых селекторов. Таким образом, он даже не должен работать, и Safari просто идет против спецификации.

---

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

Отрицание псевдо-класс,: нет (Х), является функциональной нотации принимает простой селектор (за исключением отрицания самого псевдо-класса) в качестве аргумента.

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

Простой селектор либо селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора, или псевдо-класса.

Комбинаторы: пробелы, «знак больше» (U + 003E,>), знак «плюс» (U + 002B, +) и «тильда» (U + 007E, ~). Между комбинатором и простыми селекторами вокруг него может появляться белое пространство. Только символы «пробел» (U + 0020), «табуляция» (U + 0009), «линия» (U + 000A), «возврат каретки» (U + 000D) и «подача формы» (U + 000C) может возникать в пробеле. Другие космические символы, такие как «em-space» (U + 2003) и «идеографическое пространство» (U + 3000), никогда не являются частью пробелов.

Элементы дерева документа, которые представлены селектором, являются объектами селектора. Селектор, состоящий из одной последовательности простых селекторов, представляет собой любой элемент, удовлетворяющий его требованиям. Превращение другой последовательности простых селекторов и комбинатора в последовательность накладывает дополнительные ограничения соответствия, поэтому субъекты селектора всегда являются подмножеством элементов, представленных последней последовательностью простых селекторов.

Обратите внимание на разницу между говорят о простого селектора и последовательности простых селекторов.

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

список основных определений (селектор, группы селекторов, простой селектор, и т.д.) был изменен; в частности, то, что было передано в CSS2 как простой селектор теперь называется последовательность простых селекторов, а термин «простой селектор» теперь используется для компонентов этой последовательности

Answer 2

В соответствии с CSSWG draft, то отрицательный псевдокласс принимает в качестве параметра простой селектор.

селектор представляет собой цепь из одного или более последовательностей простых селекторов, разделенных комбинаторов. Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе .

A Последовательность простых селекторов представляет собой цепочку простых селекторов, которые являются , не разделенные комбинатором. Он всегда начинается с селектора типов или универсального селектора. Никакой другой селектор или универсальный селектор не допускается в последовательности.

Простой селектор либо селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора, или псевдо-класса.

.ZZZ .YYY является селектором, а не простой селектор, поэтому использование его в качестве параметра для отрицания псевдо-класса не поддерживается. Однако некоторые браузеры, такие как Safari, могут поддерживать его, но мы не должны рассчитывать на это.

Answer 3

В качестве альтернативы вы можете использовать это правило CSS, которое служит для

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

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

Вот является codepen link