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

:not() Selector Discrepancy: Safari versus Chrome/Firefox

The :not() CSS selector, used to exclude specific elements from a selection, has been found to behave differently in Safari compared to Chrome and Firefox. This discrepancy has caused confusion for developers, prompting an investigation into its underlying cause.

According to recent observations, Safari now fully supports the level 4 specification of :not(), which allows for complex selectors in its arguments. This feature brings it into alignment with jQuery's implementation. However, Chrome and Firefox currently support only simple selectors as arguments for :not().

The :not() selector anomaly stems from the use of complex selectors within its parentheses. A complex selector comprises multiple simple selectors joined by combinators, such as descendant, adjacent sibling, and general sibling. In the provided code snippet, the selector p div represents a complex selector, as it combines two simple selectors (p and div) with a descendant combinator.

Since Chrome and Firefox do not support complex selectors for :not() arguments, the p div portion in the provided code is not recognized. As a result, the :not() selector is effectively ignored, and the fallback rule em:not(...) applies. This fallback rule, which specifies red as the color for all elements, is responsible for the red text observed in Chrome and Firefox.

Conversely, Safari, with its support for complex selectors in :not(), correctly excludes elements within

elements from the red color specification. This results in the blue text displayed in Safari.

At present, the timeline for when Chrome and Firefox will support complex selectors for :not() remains uncertain. However, the implementation of the level 4 specification in Safari is a significant development that aligns it with the latest web standards and provides enhanced functionality for CSS selectors.

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