Need help picking the correct jQuery selector?

A common issue for jQuery beginners is figuring out what selector to use in their code. You know what element you want to manipulate, but you just can’t figure out the correct selector syntax. Luckily, there are a couple tools out there to assist you in this process, Selector Detector and Selector Gadget. These bookmark wonders both allow you to dynamically analyze objects on your page, but which one is right for you?

Selector Detector

The element clicked is highlighted in red and the selector recommendation is outputed in a pop-up window.

The element clicked is highlighted in red and the selector recommendation is outputted in a pop-up window.

Jessie Morris came up with an excellent tool for finding that pesky selector. He calls it the Selector Detector, and it is awesome.

The Selector Detector comes in the form of the bookmarklet, just like Firebug Lite. To use it simply bookmark the link, navigate to the page you want to use it on and select bookmark. A window will then pop up in the top right of your screen and display the selector of elements you click on. That simple.

Overall, Selector Detector works very well at selecting specific elements, however there are two setbacks. First, it only works one way. You can select an object to display it’s selector, but you can’t enter a selector to highlight the object. Second, it defaults to finding a very specific element selector. This means when you click on the second paragraph in your layout it will give you the selector specifically for that second paragraph and not all the paragraphs found on the page.

Demo (right click this button and bookmark it to make it available outside this site)

SelectorGadget

Here I am specifying that I want the bookmarklet link (green), and not every link (red).

Here I am specifying that I want the bookmarklet link (green), and not every link (red). The selector is displayed at the bottom of the screen.

SelectorGadget is a similar tool made by developers Andrew Cantino and Kyle Maxwell. It is implemented using a bookmark just like Selector Detector. However, unlike Selector Detector, it allows you highlight elements via their selector and change the specificity of your selector search.

SelectorGadget allows you to highlight elements via their selector. This is handy in situations where you think you know the correct selector, but just want to double check. Just enter in your guess into the SelectorGadget text box and the program will highlight your selector on the page.

Another cool feature of SelectorGadget is it’s ability to change specificity. Meaning you can be as broad or specific as you like in your selector search. As you can see in the picture above, not only could I specify that I wanted the selector for a basic link, but I could also narrow that search to include just links with the .bookmarklet class. This is all accomplished by simply clicking existing highlighted areas to narrow the search, or clicking unselected related areas to broaden it.

Demo (right click this button and bookmark it to make it available outside this site)

Conclusion

If you are looking to find one specific element on your page, I would recommend using Selector Detector. Its precision is greater than that of SelectorGadget. However, if you are trying to find the selector for multiple objects, Selector Detector might be overkill. In this situation I would say SelectorGadget would be your best bet. SelectorGadget makes it very easy to change your specificity and then double check your work highlighting elements via their selector.