Time saving tip

HTML & CSS
1

OMG. I just wasted 2 hours staring at my screen with my eyes 6 inches from the screen saying to myself - p opened - p closed - div opened - div closed. Because I couldn’t find the error. I was adding a div to my page and it fubared some margins. Finally I found it. It was this…

#home #main .column:nth-of-type(3) {
margin-right:0;
}

Apparently that does not mean class .column :nth-of-type. It means div:nth-of-type. I assumed it would only target the class. It does not - it targets the 3rd div. Maybe you already knew this. I did not.

I wonder if that applies to :last-child too? tested - yes it does.

2

Hi Eric,

It’s not quite as simple as that :slight_smile:

When you say .column:nth-of type(3) then the browser will first check what element has the class of .column applied ( there may be more than one type of element to take note of). If .column is applied to a p element for example then the browser will count from that the first p element (irrespective of its class) and find the third p element in sequence but will only apply the rule if that third element in sequence has a class of .column. It does not look for three .column classes but looks from the first p element and then finds the third of that type but only applies the rule if that third of type has the class.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#home #main .column:nth-of-type(3) { background:red; }
</style>
</head>

<body id="home">
<div id="main">
		<div class="column">div class</div>
                <div>test</div>
		<div>div class</div>
		<div class="column">div class</div>
		<div class="column">div class</div>
</div>
</body>
</html>

Nothing in the above will get targeted because the third div in sequence doesn’t have a class of column.

However:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#home #main .column:nth-of-type(3) { background:red; }
</style>
</head>

<body id="home">
<div id="main">
		<div class="column">div class</div>
                <div>test</div>
		<div class="column">div class</div>
		<div class="column">div class</div>
		<div class="column">div class</div>
</div>
</body>
</html>

In the above the third div will have a background of red but note that it is only the second instance of the .column class.

So to recap the browsers first checks what element the class belongs to and then it finds the third of that element. If that third element doesn’t have the same class then no match is made. There could also be other element intermingled in the above with a class of column and they would get selected on the same basis as above and each treated separately.

At least that’s how my tests and expectations show it working.

3

Wow. I find that to be massively confusing. It will be a while until that is second nature for me.

So when I was using it, I had 3 divs with class column. I was targeting the 3rd one with :nth-of-type(3)…

<div class=“column”></div>
<div class=“column”></div>
<div class=“column”></div>

Then I added another div up top with a different id.

<div id=“dif”></div>

<div class=“column”></div>
<div class=“column”></div>
<div class=“column”></div>

So then in order to target the 3rd column div I had to say :nth-of-type(4). Very confusing to me. Thanks for the explanation. I will read it a few more times in hopes more sinks in. I get it. But it will never be second nature to me.

4

Yes it is a bit confusing and not what I originally expected either .:slight_smile:

I need to further clarify a point in my explanation in that the browser looks at .column as sees that its applied to a div. It then counts from the first div in that section (irrespective of its class) and then finds the third div. If that third div doesn’t have a class of .column then no match is made.