top | item 10344858

Show HN: Extract a unique CSS selector for any element on any page

20 points| GFuller | 10 years ago |flutter.social | reply

9 comments

order
[+] petercooper|10 years ago|reply
At first glance, I thought this was going to be like Selector Gadget (http://selectorgadget.com/), a tool I've used for years to get CSS selectors for elements on pages. But it gives you a unique selector for the unique element you click, which adds a different angle.

I've got to admit, I'm not sure I'd use this over SG since SG can nail down to a single element if you use it the right way, but it's great to see more tools of this nature, as it can really help when doing ad-hoc scraping.

[+] GFuller|10 years ago|reply
I use Selector Gadget too and I was recommending users of Flutter use it to get selectors. However, I'm trying to make the process of getting a unique selector for any element so simple it won't put anyone off. This bookmarklet avoids the need to deselect things and once an element is selected it's just a case of CMD/CTRL + C.
[+] malditojavi|10 years ago|reply
I don't get it - I do this in Chrome tools > magnifying glass > right click > Copy CSS path. What does it solve this ?
[+] GFuller|10 years ago|reply
The purpose of this bookmarklet is to provide a streamlined method of getting the selector without having to go into the source or use chrome tools.

There is also the problem of using ids. For example in Flutter I may want to auto tweet out the top post in a list of posts on a blog. If the posts have individual ids, and the CSS selector includes them, every time Flutter tries to scrape new content it will get the same post. I want the unique selector for the page element. i.e. the first post in the list.

[+] eterm|10 years ago|reply
This is built in to FireFox too. Right click element, "Inspect Element", Right click element which is now scrolled in view and highlighted in the tools, "Copy Unique Selector".

I guess having it directly on right click or in view would be useful sometimes.

[+] guiporto|10 years ago|reply
Just tested it. I can't leave the Flutter Selector once I open it. Clicking OK or Cancel keeps it. I've tried ESC as well but the selector is still present until I reload the page
[+] GFuller|10 years ago|reply
There should be a red 'Close' button in the bottom right-hand corner of your screen. I'll add the option to use ESC as well.