How jQuery CSS selector works

Diving into jQuery source code, you’ll find attribution for [cci]Sizzle.js[/cci] near the top. What is Sizzle? Sizzle is jQuery’s spinoff CSS selector engine.

jQuery is optimized for easy DOM manipulation and allows method chaining by returning the jQuery object. This means that the [cci]jQuery[/cci] (or [cci]$[/cci] shorthand syntax) allows you to target DOM elements with CSS syntax.

You can select a paragraph with the id “dino” in jQuery:


Pretty easy, right? How does jQuery do this?

BigBinary has a great article walking through the process:

  • If querySelectorAll works, use querySelectorAll.
  • Else, use Sizzle.

To use [cci]querySelectorAll[/cci] instead of jQuery, you could use:


This goes to show that anything jQuery can do, core JavaScript can do (since jQuery is JavaScript). With that said, I would recommend jQuery over writing your own JavaScript from scratch as jQuery is highly tested for edge cases and offers amazing cross browser support.

jQuery without jQuery is a series that aims to open up the jQuery black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code written in JavaScript.

One thought on “How jQuery CSS selector works