开发者

How can I get the CSS Selector in Chrome?

I want to be able to select/highlight an element on the page and find it开发者_StackOverflow社区s 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


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:

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

How can I get the CSS Selector in Chrome?

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

How can I get the CSS Selector in Chrome?

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

How can I get the CSS Selector in Chrome?

  1. Right click on the dev tools element:

How can I get the CSS Selector in Chrome?

  1. Click on Copy -> Copy selector:

How can I get the CSS Selector in Chrome?

Which gives me the following:

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


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜