How can I get the CSS Selector in Chrome?
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
Although not an extension, I did find a bookmarklet called Selector Gadget that does exactly what I was looking for.
The workflow I currently follow to get CSS selectors from elements with the latest Chrome version (59) is as follows:
- Open Chrome Dev tools (
cmd/ctrl + alt + j):
- Click on the select element tool in page (
cmd/ctrl + alt + c):
- Click on the element you want to get the selector from in order to view it in the dev tools panel:
- Right click on the dev tools element:
- 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