Confusion with nth-of-type selector

HTML & CSS
1

Hello Everyone,

Please consider below example:
<div>

[INDENT] <h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>[/INDENT]
</div>

Here I can select first p and second p tags by using selectors “p:nth-of-type(1)” and “p:nth-of-type(2)” respectively.

However in below example, I’m not able to select first label using “.label:nth-of-type(1)”.

<div class=“row”>

[INDENT] <div class=“icon”>A</div>
<div class=“icon”>B</div>
<div class=“label”>1</div>
<div class=“label”>2</div>
<div class=“label”>3</div>[/INDENT]
</div>

If I use selector “.label:nth-of-type(3)”, it works. Could any one please explain me why selector “.label:nth-of-type(1)” didn’t work?

Thanks,
Sanjay Maurya

2

nth-of-type(1) is the first of those five divs, but it doesn’t have the class “label”, so .label:nth-of-type(1) doesn’t apply to any of those divs. Only the third div is both the third of its type and classed as “label”.

3

It can be a little awkward to understand at fist but as Ralph points out nth-of-type starts at the first element in that sequence irrespective of what class you have added and then nth-of-type(3) counts down to the third one and if that third element has the class you specified then a match is made. If the third element doesn’t have the class then no match is made.

It does not look for .label and then count on from there. It always starts at the beginning but a match is only made if the nth element has the class you specified.

Here’s a demo that may make it easier to see.


<!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>
p { margin:0 }
.test:nth-of-type(3) { background:red; }
</style>
</head>

<body>
<h1>.test:nth-of-type(3) { background:red; }</h1>
<div id="main">
		<div class="test">div with class .test</div>
		<div>div with no class</div>
		<p class="test">p with class .test</p>
		<p>p with no class</p>
		<div class="test">div with class .test - this will be selected</div>
		<div class="test">div with class .test</div>
		<p class="test">p with class .test - this will be selected</p>
</div>
</body>
</html>