Confusion with nth-of-type selector....

**sanjayabc1234** · May 11, 2013 14:49

Hello Everyone,

Please consider below example:
<div>

<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>

</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">

</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

**ralph.m** · May 11, 2013 15:56

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".

**Paul O'B** · May 12, 2013 02:47

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.

Code:

<!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>

User Tag List

Thread: Confusion with nth-of-type selector....

Thread Tools

Display

Confusion with nth-of-type selector....

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions