Does jQuery Truly Support All CSS3 Selectors? The Mystery of :nth-last-child() and Beyond.

Untangling jQuery's CSS3 Selector Support: Demystifying :nth-last-child() and Beyond

While jQuery boasts support for an array of CSS selectors, its CSS3 capabilities may leave you puzzled. One such example is the :nth-last-child() selector, seemingly operational in modern browsers like Firefox, Chrome, and IE 9 but curiously absent in the official documentation.

The jQuery's Selector Architecture

jQuery's selector implementation relies on a two-pronged approach. It initially attempts to utilize the native document.querySelectorAll() method, providing compatibility with the latest CSS selectors. If this approach fails, jQuery falls back on its own selector library, Sizzle.

This strategy presents an explanation for the apparent functionality of :nth-last-child() in certain browsers. As a valid CSS selector, browsers supporting document.querySelectorAll() (such as Firefox, Chrome, and IE 9) can directly process it and return the appropriate node list, effectively bypassing Sizzle.

Unveiling the Supported CSS3 Selectors

Starting from jQuery 1.9, Sizzle (jQuery's selector library) supports virtually all CSS3 selectors defined in the Selectors level 3 standard, with a few notable exceptions:

• Pseudo-elements: Explicit selections are not possible due to their CSS-based embodiment as abstractions of the document tree.
• Dynamic pseudo-classes: Event-based pseudo-classes like :hover, :active, and :focus are unsupported. Instead, event handlers must be employed to execute code as elements enter and leave these states.
• Namespace prefixes: jQuery does not handle namespacing in CSS.

Selectors Introduced in jQuery 1.9

With jQuery 1.9, a range of level 3 selectors became available, including:

• :target
• :root
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-of-type
• :last-of-type
• :only-of-type

Compatibility Caveats

jQuery 1.8 and earlier versions lack support for the above selectors, as well as :lang(), a CSS2 selector.

The Case of :nth-last-child()

In your example with :nth-last-child(), the selector is successfully processed by Firefox, Chrome, and IE 9 because these browsers support document.querySelectorAll(). However, IE 8 emulation mode fails as it doesn't support :nth-last-child(). Since jQuery/Sizzle also doesn't implement this selector, there's no fallback mechanism, resulting in failure.

Bridging the Gap

In cases where it's not feasible to upgrade to jQuery 1.9 or later, you can consider implementing the missing pseudo-classes using jQuery's custom selector extensions. It's worth noting that jQuery 1.9 offers compatibility with older versions of IE while adding support for the mentioned selectors.

The above is the detailed content of Does jQuery Truly Support All CSS3 Selectors? The Mystery of :nth-last-child() and Beyond.. For more information, please follow other related articles on the PHP Chinese website!