How do you do level 26?
CSS Diner
91–100 of 121 posts
Re: CSS Diner
#92Nice, 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?
Before the nth-child/first-child selectors had common-enough implementation and the tag didn't yet exist, I used hn + p and .epigraph + p (along with first-line set in small-caps and first-letter as an versal) to style the initial paragraph of a page or major section. That's more document layout than anything apptastic, but it made for a nice-looking page.
Re: CSS Diner
#93Web designers should be forced to use el cheapo LCD monitors. Dark grey text on black and light grey text on white are really hard to read if you do not have a very good monitor.
Re: CSS Diner
#94It 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…
I'm not sure that making it harder faster is a good idea. It was easy for me as well (for the most part), but I immediately sent out an email to some friends who are trying to learn the web basics. A game like this is a fun way to teach them about css selectors- adding some specific notes about them in the email makes it a really easy lesson.
Re: CSS Diner
#95Not able to figure out what to do. It should be simpler, Kindly put a note or some sort of information about what to do , don't put a link because I think there are more chances that the user will go away rather than playing with it.
Re: CSS Diner
#96Nice, 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?
A super useful one is for styling an element that's next to a checked checkbox.
:checked + label { background-color: green; }
http://jsbin.com/witaziwu/1/edit?html,css,output Small demo if you want to mess around with it.
Re: CSS Diner
#97This is really nice!
Re: CSS Diner
#98Does not work in Opera (the normal one) at all. The plates are jumping like crazy.
Re: CSS Diner
#99This is great. I never knew about the universal selector (*) or the general sibling selector (~). I'm sure I'll learn a few more tricks from this as well, not finished yet.
Google[0] and Mozilla[1] both have some information on their developer sites about why avoiding the universal selector is preferable from a performance point of view. I'm yet to find a case that has absolutely required the use of the universal selector. Has anybody else? [0] https://developers.google.com/speed/docs/best-practices/rend... [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_s...
I mostly see the universal selector used for resets (like removing all padding and margins), but it's definitely not frequently used.
Re: CSS Diner
#100Really nice job - I like the vibrating items to give you feedback on what your attempt selected.
I'm not sure if a beginner will retain much by going through each selector for each level - would be nice to throw in some levels that require you to think back to previous selectors. However, it's a good review for someone who's been exposed to them before.