nth-child selector in css

Question

i am curious to know how the nth-child css selector works. I was expecting the following code to change the background color for the 3rd

element, that is "The third paragraph". However, when I run this code, the 2nd

element is getting selected and "The second paragraph" has a changed background color.

<html>
<head>
<style> 
p:nth-child(3) {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

Dhaval Marthak · Accepted Answer · 2014-09-29 06:52:54Z

3

Since <p> is not a child of any ancestor and it cordially counts <h1>, you need to use :nth-of-type to target the third paragraph

p:nth-of-type(3) {
    background: #ff0000;
}

Fiddle

edited Sep 29, 2014 at 6:52

answered Sep 29, 2014 at 6:47

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

edave · Accepted Answer · 2014-09-29 06:46:35Z

1

nth-child does not care for the type of the other elements, so it also counts the h1 element.

You can archive what you want using p:nth-of-type(3)

EDIT: Clarification

answered Sep 29, 2014 at 6:46

edave

18811 bronze badges

1 Comment

edave Over a year ago

I hope this makes it a little clearer what I meant :)

kinakuta · Accepted Answer · 2014-09-29 06:47:29Z

0

In this case, you're specifying a paragraph that is the nth-child of it's parent. Since the parent is body, and you're asking for n to be 3, it will be the second p in your markup.

answered Sep 29, 2014 at 6:47

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

Collectives™ on Stack Overflow

nth-child selector in css

3 Answers 3

Fiddle

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related