: el selector not () no se comporta de la misma manera entre Safari y Chrome / Firefox

Me está costando trabajo descifrar por qué el siguiente código se muestra en azul en Safari, pero en rojo en Chrome y Firefox.

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

FOO

https://jsfiddle.net/hzcLpf9L/

Aparentemente parece que Chrome y Firefox no son compatibles con :not() selectores de CSS con múltiples niveles en ellos. (Posible error?)

Me encantan los selectores :not() y desarrollo con Safari, por lo tanto, cuando descubrí mi sitio web en Chrome casi tuve un ataque al corazón. Cualquier explicación sobre por qué ocurre este extraño comportamiento sería muy apreciada.

Safari envió recientemente la versión de nivel 4 de :not() , que permite selectores complejos para argumentos, poniéndolo a la par con la implementación hasta ahora no estándar de jQuery . Ver las notas de la versión . La encarnación actual de :not() solo permite un único selector simple para un argumento, por lo que un selector complejo como p div no funcionará en los navegadores actuales por diseño.

Un selector complejo es una expresión que consiste en uno o más selectores compuestos separados por combinadores tales como descendiente, > , ~ y + . Un selector compuesto es una secuencia de uno o más selectores simples. div es un selector compuesto que consiste en un selector simple, y p div es un selector complejo que consta de dos selectores compuestos (cada uno de los cuales consta de un selector simple), separados por un combinador descendiente.

Actualmente no se sabe cuándo aterrizará en los otros navegadores, aunque es poco probable que la nueva especificación de :not() cambie en este punto: la definición actual de nivel 4 es obvia y si la variedad original de WebKit es lo suficientemente atrevida. para implementarlo, entonces es solo cuestión de tiempo antes de que llegue a las otras cepas (incluido Blink).

Después de casi cinco extenuantes años de espera desde la FPWD, podríamos llegar a ver una CR de seleccionadores-4 muy pronto. Considérame bombeado.

De la especificación :

La pseudoclase de negación,: not (X), es una notación funcional que toma un selector simple (excluyendo la propia pseudoclase de negación) como argumento. Representa un elemento que no está representado por su argumento.

y en otro lugar en la especificación :

Un selector simple es un selector de tipo, selector universal, selector de atributos, selector de clases, selector de ID o pseudoclase.


El comportamiento de Chrome y Firefox es correcto. Un combinador descendiente puede no aparecer en un selector simple (y por lo tanto, a: no pseudo-clase)


Esto puede cambiar en Selectores Nivel 4. El borrador actual del editor permite selectores más complejos. Parece que has encontrado una implementación experimental.