The CSS Selector Tool

Last updated - May 15, 2019

After publishing our first tool for getting higher specificity CSS Selectors, several users asked us why not having a tool to help them get a CSS Selector in the first place.

So we made one. In this article, I will explain in detail how this tool work and how it can help beginners and experienced web developers alike.


For best results use it with Chrome


This is a useful tool for generating CSS selectors for an specific element in a page. It calculates not just 1 but 3 selector alternatives to choose from which gives you enough clue to create the perfect selector for your use case, or simply use one of the provided options as is.


Why Use A CSS Selector Generator


Either if you are in a hurry to get a job done or want to get some ideas for getting to that element you want to style, or simply you're learning CSS and want to make sure you're doing it the right way, you'll find using this tool is actually not a bad idea. Modern web development takes CSS knowledge for granted and selectors are the cornerstone of the whole technology.

While the CSS selectors generated by the tool are mostly accurate, you better test before deploying (as should always be with any code) as the algorithms may not be 100% accurate under certain circumstances. We will continue improving the tool in the future so we appreciate any feedback you can provide.


Visualizing CSS Selectors


If you wonder how this tool looks like here is a quick preview:

Tool screenshot

The most interesting thing about this tool is perhaps the fact that it is completely online. In order to make the tool fully online and to accomplish the task we wanted it to do, we rely on an IFRAME and some other fancy tricks to make interacting with the page less troublesome.

We use a similar approach in our incoming service and we keep improving it everyday. In any case it is worth noting that the URL field is not a browser address bar so it lacks browser functionality like fixing incorrect URLs with a web service. You'll have to enter the full valid URL of the page you want to test with this tool. Just open it up in another tab and copy the URL back into the tool.

Once you enter the URL and hit Enter, the page will be loaded in the frame and you will be just one step away from visualizing generated CSS Selectors for any element you want. At this point you should have already noticed there are three large fields that eventually will hold the generated selectors.


Navigating Through Elements


Just go ahead and click any element in the page. The three large fields will instantly populate with the CSS selector options. You can go any level up into the element tree hierarchy all the way to the BODY tag and generate selectors along the way by clicking on the breadcrumb like buttons that appear at the top of your page once you select an element, something you may find useful.

The 'X' button on the left most side lets you clear the element selection including the fields containing the generated selectors as well. Another way to clear whats currently selected in the page is by just scrolling. Lastly, all of the three selector fields have a button for easily copy the field content to the clipboard.


Element tree navigation


And this is it. Play with the tool and save some time getting selectors for any element in the page. Don't forget to leave us some feedback if you feel like it.

We hope this tool help you improve your CSS Selector authoring skills, by looking at how you can get to any element with different approaches provided by the generated options.