Nth-child brain exploded


23 Psuedo selectors

Ok so im trying to change the 3rd paragraph using the nth-child() syntax. I cant figure out why its the 4th child.

I understand p and h3 are children of body. but having trouble understanding what i wrote.

Is this right logic.

h3 p p p are all children of body

the child i need to change is 4th child of body and it is a paragraph
so p:nth-child(4)

Replace this line with your code. 
		<h3 class="fancy">Header h3</h3>
		<p class="fancy">First paragraph</p>
		<p id="serious"> Second paragraph</p>
		<p>Third paragraph</p>

p:nth-child(4) {
    font-size: 26px;


you seem to understand the logic. The confusing thing is that nth-child counts all elements. as you noticed:

h3 first child
p second child
p third child
p fourth child

then what is the point of nth-child you might wonder? Well see what happens if you do:

p:first-child { color: red }

what do you reckon is going to happen?

The answer? Nothing. the first child is a h3, not a paragraph, so the css code doesn't get applied, so nothing gets coloured red.

if you then realize that there is also nth-of-type, nth-child starts to make more sense, nth-child counts all children, nth-of-type only of the element you selected.


thank you I will do more reading on nth-of-type.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.