Tricky CSS Selectors Quiz | Hacker News Reader

Tricky CSS Selectors Quiz

milanlandaverde.com

33 pointsmdaverde17 comments

This is interesting, but you basically have to keep guessing until you get the right answer.

Would be nice to have a 'done' button to suggest that you think you've found the answer and the site can tell you you're wrong. Otherwise you wonder if you're wrong, or if the site is just broken.

While I was playing I was thinking "It would be nice if they tracked the sequence in which answers were selected." On several questions, I immediately clicked a few that were obvious and then the rest I was like "...and maybe this one?"

I'll second the "done" suggestion. I'm fairly new to web development, I got quite a few of them right simply by guessing, but it quickly changed to the next question before I had a chance to analyse and internalize why my guess was correct.

That said, I dig the format. It's interesting to be presented with a piece of unfamiliar syntax, and then be expected to work out it's meaning.

Yeah that and/or a 'skip' button in case you can't sort it out.

I didn't figure out 15 and peeked at the JS source to get through, skipping would have been simpler.

A quicker way would've been to run document.querySelectorAll('the_selector') in your console to identify the elements to click

You can see the answers in the JS on the page.

Pretty cool tester, I think #2 isn't correct, at least in Chrome and Firefox, the third article doesn't match: http://jsfiddle.net/Ldgdh/

The browsers are correct:

http://www.w3.org/TR/CSS2/selector.html#matching-attrs

Yes I think too #2 It's working here http://jsbin.com/epexom/1/ did you passed it, or I am doing some thing wrong

These were pretty simple except for that last one.

http://css-tricks.com/how-nth-child-works/

I wouldn't say tricky ;) Only one's that had me thinking were :root and :last-of-type

This would be a great quiz to give during a job interview if you're hiring a web developer.

No it wouldn't. Sadly most people don't seem to understand that IE8 and IE9 and even IE10 do not support CSS3 selectors/ or some of them. And to top it off, they also don't understand that IE is still the most popular web browser there is when you add IE8 and IE9 together.

And really anything that can be done using CSS3 selectors can be done by thinking ahead on the development and providing proper classes/ids/wrappers/elements.

When learning about CSS people typically don't choose to specifically learn what isn't in IE n

I might be a bad example, but when I see a "not supported in IE" mention and there's no pollyfill, the feature goes to the same bucket as the cool Dart features and the fun things you can do in the next version of ecmascript. Good to hear they exist, but I'll properly learn them when I'll be able to use them.

That was fun. I hadn't played with any of the new css selectors.

Reply on news.ycombinator.com