Testing CSS selectors in Firefox

CSS selectors are used frequently when writing jquery code. Recently I discovered Firefox provides a handy syntax for testing CSS selectors:

$$('CSS selector')

In the screenshot below, I’m looking at an <h3> element with the class ‘chapter-title’ using Firefox’s web developer tools.

firefox inspector

To test if the selector ‘h3.chapter-title’ returns the expected elements, enter $$('h3.chapter-title') in the console. The command returns a nodelist with two elements, one for each match. Hovering over the individual element in the console will highlight the corresponding element in the page.

testing css selector with $$