: not () selector não se comportando da mesma forma entre o Safari e o Chrome / Firefox

Estou tendo muita dificuldade em descobrir por que o código a seguir é exibido em azul no Safari, mas em vermelho no Chrome e no Firefox.

em:not(div) { color: red } em:not(p div) { color: blue } 
 

FOO

https://jsfiddle.net/hzcLpf9L/

Aparentemente, parece que o Chrome e o Firefox não suportam :not() seletores CSS com vários níveis neles. (Possível bug?)

Eu gosto muito de :not() seletores e desenvolvo com o Safari, portanto, quando descobri meu site no Chrome, quase tive um ataque cardíaco. Qualquer explicação sobre por que esse estranho comportamento acontece seria muito apreciada.

O Safari lançou recentemente a versão de nível 4 de :not() , que permite seletores complexos para argumentos, colocando-o em par com a implementação até então não padrão do jQuery . Veja as notas de lançamento . A encarnação atual de :not() só permite um único seletor simples para um argumento, portanto, um seletor complexo como p div não funcionará nos navegadores atuais pelo design.

Um seletor complexo é uma expressão que consiste em um ou mais seletores compostos separados por combinadores, como descendente, > , ~ e + . Um seletor composto é uma sequência de um ou mais seletores simples. div é um seletor composto que consiste em um seletor simples, e p div é um seletor complexo que consiste em dois seletores compostos (cada um deles consiste em um seletor simples), separados por um combinador descendente.

Atualmente não se sabe quando isso acontecerá nos outros navegadores, embora seja improvável que a nova especificação de :not() irá mudar neste ponto – a atual definição de nível 4 é óbvia e se a versão original do WebKit é ousada o suficiente para implementá-lo, então é realmente apenas uma questão de tempo antes de chegar às outras cepas (incluindo o Blink).

Depois de quase cinco anos exaustivos de espera desde o FPWD, poderíamos finalmente ver um CR de seletores-4 em breve. Considere-me bombeado.

Da especificação :

A pseudo-class de negação,: not (X), é uma notação funcional que usa um seletor simples (excluindo a própria pseudo-class de negação) como argumento. Representa um elemento que não é representado por seu argumento.

e em outro lugar na especificação :

Um seletor simples é um seletor de tipo, seletor universal, seletor de atributo, seletor de class, seletor de ID ou pseudo-class.


O comportamento do Chrome e do Firefox está correto. Um combinador descendente pode não aparecer em um seletor simples (e, portanto, uma: não pseudo-class)


Isso pode mudar nos seletores de nível 4. O rascunho do editor atual permite seletores mais complexos. Você parece ter encontrado uma implementação experimental.