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

71–80 of 121 posts

Re: CSS Diner

#71

Post by shittyanalogy »

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 selector you called it on. It matches all sibling nodes of the selector you called it on.

edit 3: Actually, I don't know what I'm doing. It might be a bug. I can't tell anymore. Anyone else have any thoughts?

edit 4: OK, I finally get it... nth-last-child() is a qualifier not a grouper(I don't know the actual css terms so I made those up). That is to say that when you specify bento:nth-last-child(2) you're not saying "of all the bentos give me the second one" you're saying "of all the bentos give me those that are in the second child position."

Re: CSS Diner

#72

Post by JoshTriplett »

flukeout wrote: post #60
JoshTriplett wrote: post #26

Quite a bit of fun. One notable issue: several puzzles need to have additional elements or classes added to prevent less sophisticated solutions from working. It's often possible to use a simpler selector than the one being taught in a particular puzzle.

Hey can you give me a specific example that's bothering you?

One example of how it should work: On puzzle 1, the expected solution is "plate", but * works fine; that's completely OK because puzzle 2 forces you to use a more specific selector.

On level 7, it's possible to ignore the intended lesson and use "plate .small, bento .small".

On level 10, surprisingly, it's not possible to ignore the intended lesson and write "apple, orange, bento, plate".

On level 11, .table * * works, though that does use the intended lesson.

That's in addition to the ones already mentioned in the sibling comment, which were the first ones I noticed.

Re: CSS Diner

#73

Post by Aeolus98 »

ntaylor wrote: post #67
dfritsch wrote: post #64

What should the solution to Level 19 be? I couldn't get anything with 'nth-last-child' to work for me.

Same issue here. Not sure what I'm missing.

:nth-last-child(4), because if you do first-child(2) it selects the second orange as well.

Re: CSS Diner

#74

Post by enscr »

Well done. A little 'getting started' would help people get started faster. This written at the top "Select the plates" & the progress bar weren't obvious because there were occluded form the view.

Re: CSS Diner

#75

Post by kang »

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…

Came here to report level 19 as well.

According to the description on level 18

    div p:nth-child(2)
selects the second

in every

So on level 19, to select the first in ,

    div bento:nth-child(1)
should work, but it doesn't. However,

    div bento:nth-child(2)
works. So I think a possible bug here?

Re: CSS Diner

#76

Post by Aeolus98 »

matthuggins wrote: post #35

Cool, but it's definitely got some issues. For example, this failed: orange:last-of-type, apple:last-of-type while this worked: apple:last-of-type, orange:last-of-type

I just did it with .small:last-of-type, as it executes cleaner and can be scaleable

Re: CSS Diner

#77

Post by kaplejon »

What an incredibly pleasant treat. Fun with smart progression. This certainly brought a smile to my face.

But what I liked most, is that as someone with very little experience in writing CSS, this allowed me to breeze through the simpler selectors, while building my confidence on the more complex selectors. No doubt the graphical representation was extremely helpful in that regard.

A resource worth sharing.

Re: CSS Diner

#78

Post by asadlionpk »

you should put up little help message to tell what exactly the player has to do. Took me few minutes to understand that I had to type in the css selector.

Re: CSS Diner

#79

Post by pippy »

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.

Re: CSS Diner

#80

Post by vxNsr »

xarien wrote: post #19
TazeTSchnitzel wrote: post #8

I didn't like that apple:last-of-type, orange:last-of-type worked, but not orange:last-of-type, apple:last-of-type. Had me flummoxed for a bit.

Interesting... When I went through it quickly I think I used .small:last-of-type and never ran into this.

Yeah, my ah-ha moment happened when I realized that the pickles weren't small.
Post reply on HN