How can I get the CSS Selector in Chrome?

Google ChromeWeb Scraping

Google Chrome Problem Overview


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.BodyS

I know you can see the selection on the bottom after doing an inspect element, but how can I copy this path to the clipboard? In Firebug I think you can do this, but don't see a way to do this using the Chrome Developer Tools and search for an extension did not turn-up anything.

This is what I am trying to do for more reference: http://asciicasts.com/episodes/173-screen-scraping-with-scrapi

Google Chrome Solutions


Solution 1 - Google Chrome

Chrome Dev Tools CSS Path

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

Solution 2 - Google Chrome

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

Solution 3 - Google Chrome

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):

Step 1 - Opening Chrome Dev tools

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

Step 2 - Clicking on the select element tool in page

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

Step 3 - Selecting the element

  1. Right click on the dev tools element:

Step 4 - Right clicking on the element

  1. Click on Copy -> Copy selector:

Step 5 - Copy selector

Which gives me the following:

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

Solution 4 - Google Chrome

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.

Solution 5 - Google Chrome

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionkaleView Question on Stackoverflow
Solution 1 - Google ChromeCarlos CervantesView Answer on Stackoverflow
Solution 2 - Google ChromekaleView Answer on Stackoverflow
Solution 3 - Google ChromeCésar AlbercaView Answer on Stackoverflow
Solution 4 - Google ChromeFrancis ShanahanView Answer on Stackoverflow
Solution 5 - Google ChromeimaginethepoetView Answer on Stackoverflow