Why Do Safari, Chrome, and Firefox Display Different Results with the CSS `:not()` Selector?

:not() Selector Discrepancy in Safari, Chrome, and Firefox

The :not() selector is used to select elements that do not match a specified set of selectors. However, there may be inconsistencies in how this selector behaves across browsers, as we can see in the following code:

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

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

In Safari, the above code renders the 'FOO' text in blue, while in Chrome and Firefox, it renders in red. This behavior is due to a recent update in Safari that implements the level 4 version of :not(), which allows it to handle more complex selectors.

In the current implementation of :not(), only single simple selectors are supported as arguments. Complex selectors, such as 'p div', are not currently supported by design. Therefore, in Chrome and Firefox, the :not(p div) rule fails to apply, and the 'FOO' text inherits the red color as per the first rule.

Safari, however, has implemented the more advanced level 4 specification, allowing complex selectors for :not() arguments. Hence, the :not(p div) rule matches the 'FOO' element, resulting in the blue color.

This discrepancy highlights the potential challenges and considerations when developing cross-browser compatible websites. As newer versions of browsers introduce updated CSS specifications, it becomes necessary to keep track of browser compatibility and potential implementation differences.

The above is the detailed content of Why Do Safari, Chrome, and Firefox Display Different Results with the CSS `:not()` Selector?. For more information, please follow other related articles on the PHP Chinese website!