How can I get the CSS Selector in Chrome?

Question

I want to be able to select/highlight an element on the page and find its selector like this:

div.firstRow div.priceAvail>div>div.PriceCompare>div.B

Answer 1

If Chrome Dev tools if you select the element in the source pane and right click, then you will see the "Copy CSS Path" option.

In newer versions of Chrome, this is (right-click) > Copy > Copy selector.
You can also get the XPath with (right-click) > Copy > Copy XPath

Answer 2

Although not an extension, I did find a bookmarklet called Selector Gadget that does exactly what I was looking for.

Answer 3

The workflow I currently follow to get CSS selectors from elements with the latest Chrome version (59) is as follows:

1. Open Chrome Dev tools (cmd/ctrl + alt + j):

2. Click on the select element tool in page (cmd/ctrl + alt + c):

3. Click on the element you want to get the selector from in order to view it in the dev tools panel:

4. Right click on the dev tools element:

5. Click on Copy -> Copy selector:

Which gives me the following:

#question > table > tbody > tr:nth-child(1) > td.postcell > div > div.post-text > blockquote > p

Answer 4

Do "Inspect Element" or Ctrl+Shift+I, it's at the VERY bottom of the screen. You can also type in the "Search Elements" box at the top-right of the dev tools if not sure about the selector.

Answer 5

It's sometime necessary to do this if you have a very complex app structure that you inherited and are trying to track down a very tricky multi nested css depth problem. Jquery mobile pre 1.3 would be a good example of this. Bootstrap apps etc..

I tried the above tool but could not get that to actually select the entire parent and children of a complex inheritance similar to the original posters question.