Zach’s ugly mug (his face)

Zach Leatherman

Selecthor: A Better way to Learn and Demo CSS Selectors

21 Apr 2017 Zach Leatherman

I wanted a better way to live demo what nodes a CSS selector matches on the actual HTML source code (instead of the rendered view), so I built one. I show how it works in the video above.

Retweet to share this post

4 Comments

➡ Load Disqus to Leave a Comment ⬅

Great, I love this; useful too. On this blogpost YouTube Video isn't loading, DevTools says: the page was loaded over HTTPS, but requested an insecure resource --> the video

Well, shoot—thanks for letting me know! I had a ton of old youtube embeds that were trying to load over HTTP. Should be fixed now.

In the video looks great, but the Github does not seem to work always get error messages:

index.js:24 Looks like there was a problem. TypeError: Failed to fetch
at Selecthor.fetch (file:///C:/Program%20Files%20(x86)/help/selecthor-master/index.js:18:9)
at file:///C:/Program%20Files%20(x86)/help/selecthor-master/index.js:123:5
Fetch API cannot load https://www.zachleat.com/se.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
An input box for the file to display would be helpful.
Better with drag end drop file paste. Regards

Hey lutz, if you look at the `index.js` file it makes an explicit `fetch` call to `demo-table.html`. Replace this with your own file. It may require a web server to work correctly. Have you seen https://www.npmjs.com/packa... It works great for this purpose, just navigate to the directory and run `http-server .`