Why Does the CSS `:not()` Selector Behave Differently in Safari, Chrome, and Firefox?

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

Browsers often implement features with varying capabilities, leading to rendering discrepancies. The CSS :not() selector is one such case, where it exhibits different behaviors across Safari, Chrome, and Firefox.

Problem:

The :not() selector fails to work as expected when specifying multiple levels in the argument. In this example:

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

Safari renders the text in blue, while Chrome and Firefox use red.

Cause:

The root cause is Safari's recent implementation of the level 4 :not() selector, which allows complex selectors as arguments. Chrome and Firefox, on the other hand, only support single-level arguments in the current version of :not().

Explanation:

A complex selector includes multiple compound selectors separated by combinators (e.g., descendant, sibling). In this case, "p div" is a complex selector consisting of two compound selectors ("p" and "div") separated by the descendant combinator.

Expected Behavior:

According to the level 4 specification of :not(), the selector should apply the "blue" rule to any "em" element that is not inside a "div" element, regardless of whether it is nested inside a "p" element.

Current Status:

It is anticipated that Chrome and Firefox will eventually adopt the new specification, leading to consistent behavior across browsers. Until then, developers should be aware of potential discrepancies when using :not() selectors with multiple levels in these browsers.

The above is the detailed content of Why Does the CSS `:not()` Selector Behave Differently in Safari, Chrome, and Firefox?. For more information, please follow other related articles on the PHP Chinese website!