CSS Selector Finder for Chrome Devtools

Easy to use Devtools sidebar that aids in finding unique CSS selectors.


1-Minute Demo


Download and install the extension from the Chrome App Store:
CSS Selector Finder for Chrome Devtools in the Chrome Web Store



Enable/Disable ID, Class, Tags:

ID, Class names, and Tag names are all used by the CSS Selector Finder by default. If you want to disable any of those from being used, simply deselect the appropriate checkbox in the panel, as seen below. Click "Generate" after changing any settings to regenerate the selector.

Exclude specific values of ID, Class, Tags:

In addition to completely disabling the use of ID, Class, and/or Tags, we can also exclude specific values by adding them to the appropriate filter list. Enter the value to filter, and click the "Add" button. In the example below, we are filtering out "result-row" and "result-title" for class names, and "li" for the tag name. Thus, the generated CSS selector will not be able to use those values. Only enter the string portion of the selector (for ID, do not prepend with #. for Class names, do not prepend with ".")

Use Custom Attributes

We can also have the CSS Selector generation use custom attributes when generating a selector. In the example below, we've added "data-rf-test-id" as the name of a custom attribute to use. The "*" indicates that we don't care about the specific value of the attribute. During creation, if the value field is left blank, it will be created as "*". If a specific value is used, then the CSS selector generation logic will only consider using the custom attribute when it has that specific value.

Robustness and Optimization Settings

For details of these settings, please see the documentation for https://github.com/antonmedv/finder


Screen 1:

Screen 2:

Screen 3:

Screen 4:


  • Does not work with IFRAMEs.
  • Development

    Github: https://github.com/abbadata/devtools-css-selector


    If you find this tool useful, donations are appreciated!