Do CSS Selector Engines Favor Right-to-Left Reading?

CSS Selector Engines: Right-to-Left Reading

In the world of CSS, it has been commonly assumed that selectors like .name perform faster than div.name. However, some recent findings claim otherwise, suggesting that most selector engines read from right to left. This raises questions about the performance implications and the reasoning behind this approach.

Right-to-Left Evaluation

While it's true that the assumption of .name being faster may be flawed, the overall performance is highly dependent on browser implementation and specific document structure. Nonetheless, most modern CSS selector engines follow a right-to-left evaluation approach.

According to Boris Zbarsky, the developer of Gecko, browsers typically operate by selecting an element and evaluating all candidate selectors to determine if it matches, rather than identifying matching elements for a given selector. This right-to-left approach simplifies the process of walking across combinators, such as > or , within selectors.

Traversal Within Simple Selectors

However, it's important to differentiate that right-to-left evaluation does not extend down to the simple selector level within each compound selector. For example, in the complex selector div.name[data-foo="bar"]:nth-child(5):hover::after, the browser might not necessarily check conditions in the following order: hover, child count, data attribute, name class, and type.

Instead, specific simple selectors, like IDs, might be prioritized for performance reasons. This is evident in Gecko's implementation, where rules with IDs are checked first to optimize the matching process.

Summary

The direction of CSS selector engine reading is generally right-to-left, but the specific details of how this is implemented can vary between browsers. Furthermore, right-to-left evaluation only applies across combinators within compound selectors, not down to the individual simple selector level.

The above is the detailed content of Do CSS Selector Engines Favor Right-to-Left Reading?. For more information, please follow other related articles on the PHP Chinese website!