css - : el selector not() no se comporta igual entre Safari y Chrome/Firefox

google-chrome css-selectors

Question

Me está costando mucho entender 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
}

<p>
    <em>FOO</em>
</p>

https://jsfiddle.net/hzcLpf9L/

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

Soy muy aficionado a :not() selectores 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 comportamiento extraño sería muy apreciada.

Answer 1

De la especificación :

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

y en otra parte de la especificación :

Un selector simple es un selector de tipo, selector universal, selector de atributos, selector de clase, selector de ID o pseudo-clase.

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

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

Answer 2

Safari lanzó 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 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 consiste en un selector simple), separados por un combinador descendente.

Actualmente no se sabe cuándo llegará a 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 cepa 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 agotadoras esperas desde la FPWD, podríamos ver un CR de selectores-4 muy pronto. Considérame bombeado.