Does jQuery Truly Support All CSS Selectors?

jQuery's Selector Support: Unveiling the Mysteries

While jQuery boasts extensive CSS selector support, certain selectors like :nth-last-child() remain elusive. However, it's not as simple as it seems.

jQuery's Partial Implementation of CSS3 Selectors

Despite claiming compliance with Selectors Level 3, jQuery's selector implementation falls short in some areas, as clarified in its documentation. It relies on its underlying selector library, Sizzle, which supports most but not all Level 3 selectors.

Selectors Supported and Not Supported

Starting from jQuery 1.9, Sizzle supports almost all Level 3 selectors except:

• Pseudo-elements
• Dynamic pseudo-classes like :link/:visited and :hover
• Namespaced prefixes

Additionally, jQuery has added its own selectors.

:nth-last-child() in Action

The :nth-last-child() selector appears to work in some browsers because jQuery leverages document.querySelectorAll(). Browsers that support both :nth-last-child() and document.querySelectorAll(), like Firefox, Chrome, and IE9, return a node list that jQuery can utilize.

Fallback Mechanism and IE8 Compatibility

If document.querySelectorAll() fails, jQuery falls back to Sizzle. However, Sizzle does not support :nth-last-child(). Since IE8 doesn't implement document.querySelectorAll(), the fallback mechanism fails, leading to failure on IE8.

Alternative Solutions

Upgrading to jQuery 1.9 or later resolves the :nth-last-child() issue. Alternatively, jQuery provides custom selector extensions for implementing unsupported pseudo-classes.

The above is the detailed content of Does jQuery Truly Support All CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!