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

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

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

<In what way does your code behave incorrectly? Include ALL error messages.>
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;
}

Result

ICEBERG

lovely iceberg

frustrated iceberg

LARGE ICEBERG

</body>
<do not remove the three backticks above>

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

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?

2 Likes

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

Can you show me the updated code?

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

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

1 Like

Make my what into a tag?

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

1 Like

so basically a p tag within the h3 tag.

1 Like

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

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

2 Likes

No @noobyprogrammer you shouldn’t do that it’s wrong…

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

1 Like

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

3 Likes

@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?

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.

1 Like

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