5 ms·
Tricky CSS Selectors Quiz
- pedalpete 13y agoThis 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 13y agoWhile 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 13y agoI'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 13y agoYeah 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_ 13y agoA quicker way would've been to run document.querySelectorAll('the_selector') in your console to identify the elements to click
- mbrameld 13y agoYou can see the answers in the JS on the page.
- prezjordan 13y agoI wouldn't say tricky ;) Only one's that had me thinking were :root and :last-of-type
- kingkool68 13y agoThese were pretty simple except for that last one.
- joeblau 13y agoThis would be a great quiz to give during a job interview if you're hiring a web developer.
- dubcanada 13y agoNo 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_ 13y agoWhen learning about CSS people typically don't choose to specifically learn what isn't in IE n
- hrktb 13y agoI 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.
- xer0x 13y agoThat was fun. I hadn't played with any of the new css selectors.
- shoebappa 13y agoPretty cool tester, I think #2 isn't correct, at least in Chrome and Firefox, the third article doesn't match: http://jsfiddle.net/Ldgdh/ http://jsfiddle.net/Ldgdh/
- Chris_Newton 13y agoThe browsers are correct: http://www.w3.org/TR/CSS2/selector.html#matching-attrs http://www.w3.org/TR/CSS2/selector.html#matching-attrs
- deleted 13y ago[deleted]
- ahmicro 13y agoYes I think too #2 It's working here http://jsbin.com/epexom/1/ http://jsbin.com/epexom/1/ did you passed it, or I am doing some thing wrong
- elchief 13y agohttp://css-tricks.com/how-nth-child-works/ http://css-tricks.com/how-nth-child-works/