CSS Diner • Hacker News Board

Re: CSS Diner

#51

Post by sirclueless » Tue, Mar 25, 2014, 3:33 AM UTC

joeframbach wrote: post #5

Level 13: Select every pickle to the right of the bento The solution `bento ~ pickle` passes, but I don't think it should. It does not select the pickles on the plates that are to the right of the bento.

I don't think it's meant to. The instructions are a bit ambiguous, but they mean just the pickles that are siblings to the bento, which you can see because only those are bouncing.

Re: CSS Diner

#52

Post by Springtime » Tue, Mar 25, 2014, 3:51 AM UTC

danoc wrote: post #38

Really well done. I'd love to see one of these teaching the CSS animations they use.

The upbeat animations were the highlight for me. Without them I think it would have felt more an exercise than game-like. Kept the positive vibe throughout.

Re: CSS Diner

#53

Post by yeldarb » Tue, Mar 25, 2014, 3:53 AM UTC

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?

Re: CSS Diner

#54

Post by j-rom » Tue, Mar 25, 2014, 3:54 AM UTC

Wow. Thank you for this. I'm just starting out in web development and this makes learning CSS a lot easier.

Re: CSS Diner

#55

Post by pawannitj » Tue, Mar 25, 2014, 3:59 AM UTC

changyu wrote: post #21

I'm not clear what to do about the game.Could someone give me the solve for level 1 for example.thx

plate

Re: CSS Diner

#56

Post by klochner » Tue, Mar 25, 2014, 4:14 AM UTC

there's a bug in level 9 - you're enforcing an order on the tags

overall this is great

Re: CSS Diner

#57

Post by igravious » Tue, Mar 25, 2014, 4:39 AM UTC

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.

Ahhhhhhhhhhhhh

Re: CSS Diner

#58

Post by slaxman » Tue, Mar 25, 2014, 5:06 AM UTC

This is awesome! I wish this was there, when I started learing to code. I found it really difficult to understand CSS selectors back then. Great job!

Re: CSS Diner

#59

Post by flukeout » Tue, Mar 25, 2014, 5:26 AM UTC

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

It's currently depending on the order of the selected elements to match, but I'm updating it work correctly now.

Re: CSS Diner

#60

Post by flukeout » Tue, Mar 25, 2014, 5:27 AM UTC

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?