Tricky CSS Selectors Quiz

by mdaverde • 13 years ago

33 17 13 years ago

pedalpete• 13 years ago

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.

bjornsteffanson• 13 years ago

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?"

goostavos• 13 years ago

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.

nemo• 13 years ago

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.

martin_2• 13 years ago

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

mbrameld• 13 years ago

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

prezjordan• 13 years ago

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

kingkool68• 13 years ago

These were pretty simple except for that last one.

joeblau• 13 years ago

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

dubcanada• 13 years ago

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.

martin_2• 13 years ago

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

xer0x• 13 years ago

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

shoebappa• 13 years ago

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/

Chris_Newton• 13 years ago

The browsers are correct:

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

ahmicro• 13 years ago

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

elchief• 13 years ago

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

Tricky CSS Selectors Quiz

Related Stories