:not() selector not behaving the same between Safari and Chrome/Firefox

I am having a pretty hard time figuring out why the following code renders in blue in Safari but in red in Chrome and Firefox.

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

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

https://jsfiddle.net/hzcLpf9L/

Apparently it looks like Chrome and Firefox do not support :not() CSS selectors with multiple levels in them. (Possible bug?)

I am very fond of :not() selectors and I develop with Safari, therefore when I discovered my website on Chrome I almost had an heart attack. Any explanation on why this strange behavior happens would be highly appreciated.

:not() selector not behaving the same between Safari and Chrome/Firefox

2 Answers