Nth-child brain exploded

Language Help CSS
1

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

https://www.codecademy.com/courses/web-beginner-en-WF0CF/4/5?curriculum_id=50579fb998b470000202dc8b

23 Psuedo selectors

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

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. 
	<body>
	
		<h3 class="fancy">Header h3</h3>
	
		<p class="fancy">First paragraph</p>
		<p id="serious"> Second paragraph</p>
		<p>Third paragraph</p>
		
		
	</body>


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

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.

2 Likes
3

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

4

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