Zach’s ugly mug (his face)

Zach Leatherman

Selecthor: A Better way to Learn and Demo CSS Selectors

April 21, 2017

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

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

What Are You Excited About?
Randsom: A Random Web Fonts Ransom Note
4 Replies
    1. Bram de Haan Disqus

      22 Apr 2017 at 04:11PM
      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 at 05:55PM
        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.
      2. lutz Müller Disqus

        24 Jul 2017 at 12:04PM
        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 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 at 04:55PM
          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 It works great for this purpose, just navigate to the directory and run `http-server .`
          Social Card Image Preview

          This is what will show up when you share this post on Social Media:

          How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)