Selecthor: A Better way to Learn and Demo CSS Selectors

On Twitter (archived) April 21, 2017

~~selecthor~~ (Archived)

A better way to test, learn, and demo CSS selectors

Age: 20 Apr 2017
Updated 25 Jul 2026
Issues: 1
1
PRs: 0
2

Watch on YouTube: Selecthor: A Better way to Learn and Demo CSS Selectors

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.

Tags: Project

< Older
Newer >

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

4 Comments

Bram de Haan Disqus
22 Apr 2017

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
1. zachleat Disqus
  22 Apr 2017
  
  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.
lutz Müller Disqus
24 Jul 2017

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:5Fetch 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
1. zachleat Disqus
  24 Aug 2017
  
  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 .`

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.