Show HN: CSS Speedrun – A small game to test and improve your CSS knowledge

Nice project!<p>It feels like it is missing ways to help you get to understand things on your own, so a bit more like a test than a real game. Maybe a codegolf scoring (number of characters) and&#x2F;or semantic scoring (number of atomic expressions used) would help?<p>As somebody who&#x27;s doing frontend excessively rarely, it would feel more rewarding to see it compared to some good practices answers. Maybe store the results so you could display the most frequent answers in a future iteration?<p>Took 16 minutes, trying to understand more than to speedrun. Btw, link of hint 10 is broken (there&#x27;s an extraneous comma).<p>The dynamic selection dots are quite neatly done. I found it quite fun and it seems like there are many ways to add interesting features!

* Spoiler *<p>The use of `:not` is way more powerful that I usually remember. For example, the second exercise asks to select all the &lt;p&gt; except the one with class=&quot;foo&quot;<p><pre><code> &lt;div&gt; &lt;p&gt;&lt;&#x2F;p&gt; &lt;p class=&quot;foo&quot;&gt;&lt;&#x2F;p&gt; &lt;p&gt;&lt;&#x2F;p&gt; &lt;p&gt;&lt;&#x2F;p&gt; &lt;&#x2F;div&gt; </code></pre> This can be done with<p><pre><code> p:not(.foo) </code></pre> But also by selecting every thing that we don&#x27;t want and then negating that.<p><pre><code> :not(div, .foo)</code></pre>

Huh, I wrote a very similar game a while ago. Select elements with CSS selectors to get to the next level: <a href="https:&#x2F;&#x2F;select.pink&#x2F;" rel="nofollow">https:&#x2F;&#x2F;select.pink&#x2F;</a><p>Mine displays the elements as nested blocks, instead of printing a tree.

Minor quibble: level 6’s code uses &lt;&#x2F;input&gt;, which is invalid in HTML syntax (though harmless): &lt;input&gt; is a void element, meaning it can’t have any children and has no end tag.<p>(You could write &lt;input&#x2F;&gt;, the old XML syntax for self-closing tags, but I strongly recommend against doing that because it teaches a wrong mental model: that trailing slash is permitted in HTML syntax on void elements for XHTML compatibility but does <i>not</i> close an element: it’s just ignored.)

This was fun. :)<p>I feel like there should be another scoring axis rather than just time. I think selector length would be wrong, but something like selector complexity, or how robust the selector is to updates.<p>I scored 3m 50s, but felt like some of my selectors were a bit &#x27;dirty&#x27;.

4:22 - I got stuck on the ID one because I felt like I was meant to do something than select each one individually. I also got stuck on :enabled and ended up writing something dumb in retrospect. Some of my selectors were quite hacky in the name of speed though.<p>It would have been nice to see what the intended solutions after because otherwise I have no way of finding out that using :enabled was the intended way and not input:not(disabled), button:not(disabled). Realized after I could have used an :is there but I don&#x27;t use :is often in work due to browser support for IE so it didn&#x27;t cross my mind at the time. It would also be nice to see that #one, #three, #five, #nine (or whatever the ID&#x27;s where for that puzzle) was indeed the &quot;intended&quot; answer as a kind of trick question.<p>Without reading HN I would not have learned I was meant to use :enabled.

Very fun game. There needs to be a golf mode where you get the right answer with the shortest selector just for fun!

7:22, but I needed a lot of hints. And many of my selectors were rather arbitrary lists of unconnected selectors. I feel like there should be better answers than the ones I gave.

5:25, not terrible. Couple of them I was able to brute-force, some of them I realised the easy solution as I was brute-forcing! It&#x27;s fun, :not(...) is godsend.

I solved level 4 using is() But I am sure there&#x27;s a better way with the any of the attribute selectors (<a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;Attribute_selectors" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;Attribute_s...</a>). But I did not find how to do it :&#x27;(

Love the project.<p>Wish it had the answer as well, not just hint.

That was honestly quite fun. I did 08:04:7

Nice! I completed it in 05:40:2. Would be fun to have more levels and&#x2F;or scoring criteria.

More fun than I expected, though I seem to have forgotten how IDs are a thing you can target, everything is classes these days, so only got a time of 10:28 due to spending minutes writing an insane selector rather than ID, ID

I like it good job!!<p>I would extend its usefulness by rewarding shorter answers, as you could cheat a lot by using long nth-child selectors for everything which is basically unusable in actual stylesheets

I got stuck on level 7 because I forgot id selectors where a thing.

Took me 8 minutes, but I felt that my answers for some were sub-optimal.<p>It would be good if there was a way I could have seen other users&#x27; answers, so I could learn new tricks.

I know most rules that exist but don&#x27;t always remember them off the top of my head so I look them up. That being said, I was not actually aware of :not

I used the child combinator (&gt;) and adjacent sibling combinator (+) a lot. I think these aren&#x27;t used much in real-world code?

4:26, but there were a lot of commas sometimes...

This is great! I learned a lot in 28 mins :p

This was really good. I knew all the rules, but took me a bit to remember each of them. Did it in 10 minutes.

This is a nice project. Is there anything similar for learning to program?

This is a nice project. Could you talk about how you made the game?