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

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