3 Things (Almost) No One Knows About CSS

Actually, it is good to see you around these lands again! It’s been ages but I know that you kept yourself quite busy.

I finally took the test. I’m afraid I failed (72%) but I did it under 5 min… Is that an excuse? lol

I agree that some of the questions are a bit tricky because you can’t be sure what they’re asking but I guess this is on purpose so you pay more attention.

@kevinyank Will you be writing more articles for SP?

I got 92% on my first try :slight_smile: And I have a screenshot to prove it (though that obviously doesn’t prove it’s my first try!). I happen to love writing elegant CSS, and both Chris Coyier and Heydon Pickering are my heroes!

I’ve been designing and developing website for about 2 years now, since I graduated (Marketing), and I recently hired my first employee; a junior web developer. The interviews consisted of about 12 questions, and a mini CSS test. In that test, I had a sketched scenario of 3 boxes horizontally overlapping each other between 2 paragraphs, and asked the interviewees how they’d achieve it. Needless to say, almost none of them got the even close. It required a combination of margin, padding (optional really), negative margin, and z-index. I’d be happy to scan the diagram in and upload it if anyone’s interested.

Dane, from Cape Town, South Africa

I disagree with you writing off the ‘background’ option in the second question.
Background controls colors and images for the background. Background thus is something that typically gets overlapped by text, images, divs and so forth. So background can cause HTML elements (itself in this case) to overlap.

Background is purely visual. It does not allow any elements to move and overlap.

<div>one</div>
<div>two</div>

How can background (by itself) overlap those elements? Answer: They can’t.

Devils advocate :smile: Yes they can.

Try this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div{display:inline;background:blue;padding:25px 0}
div + div{display:block;background:red;}
</style>
</head>

<body>
<div>one</div>
<div>two</div>
</body>
</html>

The quiz said by itself. You seem to have other properties other than background Paul. Seems that isn’t following the quiz thus invalid. Your example fails without the padding.

I was quoting your post not the quiz :smile:

Anyway all elements are display:inline by default until the UA applies its own styles so there is always more going on under the hood than you think. :wink:

Here’s another not so straight forward question.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table tr > td {
	background:green;
}
table td {
	background:blue;
}
table td:first-child {
	background:yellow;
}
table > tr > td:first-child {
	background:red;
}
</style>
</head>

<body>
<table>
    <tr>
				<td>Test</td>
    </tr>
</table>
</body>
</html>

What colour will the td background be.

2 Likes

Not correctly then. I specifically say “background (by itself)”. This does actually mean no other properties. I guess you can change displays since you aren’t limited in the HTML you can use so I’m fine with that.

I’m aware of the displays default but I’m talking about the padding invalidating your code. It fails the quiz since the padding is needed for your example and my post, and the quiz specifically ask for what property can do the overlap by itself. Aside from default displays for elements and whatnot, background can’t do it.

I was avoiding any specifics to the quiz in case any one was trying it out but I take your point.

I was only playing devils advocate and if you remove the background from my post there appears to be no overlap but adding the background shows an overlap. It’s another misunderstood part of CSS and would have been good as a separate question :slight_smile:

2 Likes

You’re a sadist, O’Brien. :stuck_out_tongue:

In my eyes it’s narrowed down to 2 results instantly (ok technically 3 but that 3rd one has obviously less specificity) which is then left to specificity to determine the winner.

Sadist indeed.

I didn’t know if the green or yellow would win out. I had to try it.

says of both > and :first-child

You can use these to make selectors that are more specific.

But it doesn’t say which is more specific.

I thought order might have an effect, but no.

1 Like

Off the top of my head, only combinators do not have specificity. So >, +, etc.

It’s not an HTML element, class, ID, pseudo class, or pseudo element. So thus it HAS no specificity :slight_smile: .

You could have

table tr > td{}
table tr td{}

And the only thing that would ever allow the first rule to work is if you put it latter (ok ignore !important.)

So that means that the table tr>td{} is 0003 specificity while the table td:first-child{} is 0012 specificity. Order will not matter there.

Surprises me that the last one isn’t more specific than the second last, though, even if you rule out the child selectors.

The child selectors seem to cancel out the value of the selector, which seems weird to me.

The page will automatically insert <tbody> into the page (if not present already) so no matter what table>tr is IMPOSSIBLE. Invalidating that entire option.

1 Like

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.