"23. Pseudo Selectors" Telling Me My Third Paragraph is Undefined


#1



Hello, pfm2001 here. I was doing the "Pseudo Selectors" exercise when it told me that my third paragraph was undefined. I did not nest my paragraphs in the header, nor did I choose the third child.

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


Hello, pfm2001 here. I was doing the "Pseudo Selectors" exercise when it told me that my third paragraph was undefined. I did not nest my paragraphs in the header, nor did I choose the third child.


/*Add your CSS below!*/
.fancy {
    font-family: cursive;
    color: violet;
}

#serious {
    font-family: Courier;
    color: #8C8C8C;
}

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

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class="fancy">ICEBERG<h3>
		<p class="fancy">lovely iceberg</p>
		<p id="serious">frustrated iceberg</p>
		<p>LARGE ICEBERG</p>
		
	</body>
</html>

Thank you for reading, I would appreciate it if any of you could supply an answer.


#2

I see the problem :slight_smile:

In the lesson, you were asked to add those attributes to the nth-child(4) of the body, not the p.

But remember, make sure theres a space after body, before :nth-child, so CSS knows your selecting the fourth child INSIDE the body, rather than the fourth body. Like so:

body :nth-child(4)

Rather than,

body:nth-child(4)

Does that make sense?


#3

Yes, and I tried that, but it is returning the same error.


#4

Can you show me the updated code?


#5

/*Add your CSS below!*/
.fancy {
    font-family: cursive;
    color: violet;
}

#serious {
    font-family: Courier;
    color: #8C8C8C;
}

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

and

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class="fancy">ICEBERG<h3>
		<p class="fancy">lovely iceberg</p>
		<p id="serious">frustrated iceberg</p>
		<p>LARGE ICEBERG</p>
		
	</body>
</html>

#6

make your h3 into a p tag.
The reason your code doesnt work is because it is looking for the 4th P while you only have 3 p tags


#7

Make my what into a tag?


#8

h3 tag into p tag. sorry codecademy doesnt take < >


#9

so basically a p tag within the h3 tag.


#10

index.html - Line 8: Please close the <h3> element.
The line should look like This:

<h3 class="fancy">ICEBERG</h3>


#11

No @noobyprogrammer you shouldn't do that it's wrong..

@pfm2001 after you updated the code what error are you getting?


#12

@pfm2001, @dimitrispl has the right solution, on this line:

<h3 class="fancy">ICEBERG<h3>

your h3 closing tag is missing the slash:

<h3 class="fancy">ICEBERG</h3>

(@quobogeba) then you can either use p:nth-child(4) or body :nth-child(4), that doesn't matter. But the missing slash in the closing tag does mess up the count. Yes, i realize the instructions say body :nth-child(4), but since the 4th element is a paragraph, both methods will work fine

@noobyprogrammer, good try, but the h3 should stay.


#13

@stetim94 I've a question, and I hope you don't take it wrong, but there are only 3 paragraphs. Wouldn't p:nth-child(4) be incorrect?


#14

Good question :slight_smile: Agree we have 4 elements:

<h3>heading</h3>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

agree? The trick is, that nth-child counts all elements. The 4th element is a paragraph, so the css code between the curly brackets get applied. A better way to explain this would be to say the p:first-child code between the curly brackets doesn't get applied, since the first element is a h3, not a paragraph (so the css selector p doesn't match the html element(h3))

Does that make sense? In case of body :nth-child(4) it will target the 4th element inside the body, no matter what this element is.


#15

@stetim94 Ahh, I see. That makes sense. Thanks for explaining!