3 Things (Almost) No One Knows About CSS

Ugh. Haha! That makes sense. Now I really hate that O’Brien person. :stuck_out_tongue:

It is a really good question, though. Great way to trip people up. :slight_smile:

1 Like

Yes, I found that out the hard way a long time ago :smile:

That’s what I’m here for :smile:

3 Likes

I was one to confuse a pseudo-element with a pseudo-class (my result was 92%). Haven’t done any CSS-from-scratch long time (usually using Bootstrap).

The last is the most specific and, if not for the browser inserting a THEAD element, would be selected.

Perhaps this should be a separate thread, but …
Are there a lot of variances from one browser to another in specificity?
Specificity seems to be pretty clear
http://www.w3.org/TR/css3-selectors/#specificity

No, specificity is universal and never varies.

tbody*
But it isn’t inserted, thus this option cannot be considered as an option. You’re correct though it WOULD be selected if not for the browsers inserting tbody. That fact alone though makes that option invalid. If the last option started with “tbody” instead of “table”, then yes that would win out. But it doesn’t :wink: .

table>tr will never select anything since in no possible universe will the browser not insert <tbody> before any rows.

3/3 of those questions in article and 100% on CSS Core on the first try. Some questions were a bit tricky :slight_smile: Nice quiz overall: with careful reading and understanding there were no ambiguities.

Regarding ideas for more tricky questions: I have some, but most of them won’t fit into the format with the number of predefined answers (and I’m not that good at coming up with false answers, haha). But, one of my favorite questions: “When the styles of siblings can have an impact on the position of the absolute positioned element?”

Well done :smile:

92% on the html one first try. Both html and css quizzes done in less than 15 minutes. Even though the answers aren’t posted, there is a lot of benefit to be gained from these quizzes. Great remedy for the “Imposter Syndrome”, especially if you are a full-stack free-lancer and have no way of gauging if you are keeping up with the industry on average. Plus they are a lot of fun.

2 Likes

I just have to say I didn’t assume that :hover was a pseudo-element, I was thinking that I’d apply a pseudo-element TO the anchor on :hover to create the shadow, which seems like a perfectly valid scenario. So I think that question should be re-evaluated, or at least consider re-wording or replacing that particular answer. :^)

I’m not sure I understand. A pseudo-element is a piece of content that doesn’t correspond to an actual HTML element; I’m not sure what you mean when you say you’d apply a pseudo-element to the anchor. Do you mean you would target a pseudo-element (such as :before or :after) of the anchor?

No immediate plans, but I really enjoy it so I’ll certainly be looking for excuses. :slight_smile:

3 Likes

I’d say that’s a poor choice of words on the author’s part. Combinators like > and + certainly do cause a selector to target a smaller subset of elements in the page than the selector would without them, and in that sense they are more ‘specific’, but they do not contribute to the Specificity (with a capital ‘S’, meaning the formal ranking of CSS selectors that determines the order in which rules are applied to the document) of a selector.

Kevin Yank himself is a perfectly fallible human being, and I do share your trust issues. Writing good multiple choice questions is really hard, because for every correct answer you have to come up with four incorrect answers (the technical term is ‘distractors’) that aren’t obviously wrong but are actually wrong.

We’re actually in the process of adding support for fill-in-the-blank questions to Sit the Test, in part because it makes writing good test questions a lot easier!

Hmm. I’d argue that the semicolon is clearly optional whereas all the other options are not. Still, I do agree it could be clearer. I’ve adjusted the wording to “Which part of this code can be removed without breaking it or changing its effect?”

Indeed, he did not! I’ve deleted this question from the test and will devise a suitable replacement. Thanks for the catch (and the awesome piece of CSS trivia!).

3 Likes

In the case of div.class, I vaguely remember some people even advising not to include the div part, because the class is enough of a hook. Of course, if various kinds of elements have that class and you only wanted to target the divs, then you’d need the selector. anyhow, I’m not trying to be difficult. I was just a bit thrown by the question. :stuck_out_tongue:

I can’t take any credit. Mathias Bynens posts reams of amazing trivia like that—on CSS, JS etc. I’m rather proud that I even remembered one such piece of trivia, given my lousy memory. :slight_smile:

Thanks for expanding the explanation!
And yes, browsers insert a TBODY, not a THEAD. ( I injected a bug while correcting a bug…)

Perhaps the third question above could be improved by emphasising the word “element”:

Which of the following effects is best achieved using a pseudo-element?

I got this one in my test and read it too quickly to notice the subtlety so thought it was a trick question – “These are all done with pseudo!”

There were a couple of other questions that I thought could be worded better, but I can’t go back to it now to check which ones. How about making a way of giving feedback on question clarity from within the test?

I must admit, I was pleased to see that first question, about line height. I, too, learned to use unitless line height a long time ago, and I was surprised to discover that its behaviour is not widely known. A couple of years ago, I had somebody on these forums ranting at me for my utter stupidity in not redeclaring my line height after I changed font size, and my explanation was met with disbelief.

(It’s probably just as well he’s no longer around; I can have a quiet gloat without being tempted to remind him in person. )

I had the same argument with him a few times :smile:

4 Likes

Yay, I got 96%, quite happy with that, but I have no clue where I tripped up. None whatsoever.

Incidentally the JavaScript Core test on the same site has far too many browser DOM centric questions to be branded JavaScript Core. They should probably be two separate tests.

88% first time for me. A couple were a bit confusing but don’t think I did too badly! Would be nice to know where I tripped up though.