Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Diner

flukeout.github.io

Post reply on HN
Print view View original

81–90 of 121 posts

Re: CSS Diner

#81

Post by m_mueller »

rickyc091 wrote: post #24
DigitalSea wrote: post #15

It took me at least 5 minutes to work out what to do. It is not immediately apparent you have to type in the selectors in the styling box, I thought you had to click on the animated objects. Pretty cool idea, I found it a little too easy, but as a developer already, maybe I am not the target market. You did manage to throw in a few curve balls like needing to use general and adjacent sibling selectors to select parti…

Likewise. I kept typing ".plate", until I looked more carefully and realized there was a plate tag. I can see this being used as a teaching tool.

I did exactly the same. Then I thought the error was that it needs '{' on the same line. The 'aha' moment is funny though.

What would be nice as a learning helper: having some display of what was actually selected with the last command. For example little hands displayed on top of the objects would somewhat match the theme.

Re: CSS Diner

#82

Post by tripzilch »

Oh wow. I teach kids to make websites (and other computer stuff) and I'm totally going to use this game.

Thanks for creating it!

Re: CSS Diner

#83

Post by eiliant »

Thanks! Great design and interactivity. I would suggest adding a glossary page somewhere and some follow up at the end instead of just CSS God, maybe suggested readings?

Re: CSS Diner

#84

Post by aram »

yeldarb wrote: post #53

Nice, I've been doing CSS for years but never knew about the "+" or "~" selectors until now. Anyone have any examples of how they have or would use these in real-life?

Way back NetTuts had a good article with unusual CSS selectors; check it out here:

https://code.tutsplus.com/tutorials/the-30-css-selectors-you...

Re: CSS Diner

#85

Post by kremlin »

pippy wrote: post #79
shittyanalogy wrote: post #71

Very cool. Possible bug: on level 19, :nth-last-child() doesn't seem to work for selecting the first child in a set of children in firefox. Running $("bento:nth-last-child(2)").length is coming up 0 in the console as well. edit: these work though :/ bento:nth-last-child(even) bento:nth-last-child(1n+2) bento:nth-last-child(2n+0) edit 2: Ahh figured it out. :nth-last-child doesn't match only nodes that satisfy the sel…

.table *:nth-last-child(4) Seems to work, although for me I had to push enter a few times.

bento:nth-last-child(4) worked for me.

It selects the element that is the 4th child from last.

I think the confusion is here: people think that bento:nth-last-child(2) will be the solution because it should select the second-from-last bento element, but what it does is it selects all bento elements which are the 2nd from last children -- and since in the puzzle there is no bento that is second from last, it selects nothing.

So you have to consider it's siblings. The one we want ot select is the 4th-from-last among its siblings.

Re: CSS Diner

#89

Post by wrl »

It is really bugging me that I can't prefix ".table" or "div.table" to any of these, since intuitively that's what I'd do when writing styles.

Re: CSS Diner

#90

Post by ntaso »

I think it's great and fun but too easy. There should be levels that require more nesting or specifying elements within another group and there should be more "control groups" that should NOT be matched (like in regex golf).

e.g.: A + B > C .small

Post reply on HN