css - : el selector not() no se comporta igual entre Safari y Chrome/Firefox
google-chrome css-selectors (2)
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.
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.
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.