godsend! i am learning css and this turns up on hacker news
CSS Diner
101–110 of 121 posts
Re: CSS Diner
#102How do you do level 26?
Hint: For level 26, the apples you want to select are regular apples and do not have the small class. As a result you can use the alpple:not() selector to sove.
Re: CSS Diner
#103Earlier quoted context omitted.
Still trying to figure this one out.. Apparently "plate pickle, bento pickle" (or reverse order) isn't correct. Would love to see a hint/solution manual.
It's simpler than that. You are supposed to select the plate and bento, not the pickles on the plate and bento.
I was thinking plate + pickle and bento + pickle, since all of them were dancing... took me coming back here to figure out that only the plate/bento should be selected.
Re: CSS Diner
#104This is very cool. I found you can cheat though depending on the table and task. For example level 17 is trying to show you :last-child but you can 'cheat' and just do `apple, pickle` and it let's you move on to the next phase
Anyways, very awesome way to teach, I'm sharing it with all my friends but would be cool to force the solution and prevent "hacks" :P
Re: CSS Diner
#105Very 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.
I also had to hit enter several times on a few of these. It looks like there are some bugs on a few of them.
Re: CSS Diner
#106Earlier quoted context omitted.
.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 n…
That makes very little sense.
Adding the bento: should have removed all the other items from selection.
It sounds like you are explaining a selector such as *:nth-last-child(4)
Re: CSS Diner
#107Earlier quoted context omitted.
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 * * work…
I did several of them this way as well. At first I wasn't even reading the description to the right and just typing in selectors based on the instructions. So if I knew two comma separated selectors would work then that's what I typed in. Without going back over it to check, it's possible I entered selectors on a good number of them totally different than what was expected.
It would be interesting if the answers were tracked so we could eventually see what different developers were entering as selectors on each one.
Re: CSS Diner
#108Awesome! I shared this with my ladies' coding class, since several of them are interested in web design and have been learning CSS.
Re: CSS Diner
#109Earlier quoted context omitted.
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 n…
That makes very little sense. Adding the bento: should have removed all the other items from selection. It sounds like you are explaining a selector such as *:nth-last-child(4)
i haven't tested it in actual html/css. I'll do that now. I'll get back to you with my results
Re: CSS Diner
#110awesome game. I think it will be great if you could add some levels for
layouts.