Lesson 23 Pseudo selectors

OK, I typed the code exactly as it’s supposed to be:

/*Add your CSS below!*/

.fancy {
    font-family:cursive;
    color:violet;
}

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

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

The directions said to make the 3rd paragraph (4th child in the body) 26 px, which I did.

When I click submit, this happens

What happened?

You need a space between body and :nth-child(4), to select the 4th element inside body

I’ve been doing this for several hours and I completely missed that, even though it was in the hint. sweat:

Maybe I need to take a break.

Thanks, stetim94.

mine says that it should be 26px, and that its currently undefined. I tried the (“cmd” + “-”) key trick but nothing is working. Any ideas?

Yea, i have a good idea. Post your html + css code, so we can check it

anyone know the solution? :frowning:

I have the same problem: even with space:
/Add your CSS below!/
.fancy{
font-family:cursive;
color:violet;
}
#serious{
font-family:Courier;
color:#8C8C8C;
}
body: nth-child(4) {
font:size:26px
}

anythought

@pyblaster94502, If you need help, post your html + css code.

@tymelakgmail_com, the space should be between body and the colon, and no space between colon and nth-child, this of course only works if your html code is correct as well

font-size you should enter

1 Like

Well spotted! I missed it

Im not sure what I’m doing wrong. Anyone have any advice for me? I tried resetting the browser and it didn’t do anything.

.fancy {
font-family:cursive;
color:violet;
}
#serious{
font-family:Courier;
color:#8C8C8C;
}
body :nth-child(4){
font-size: 26px;
}

The good news is your css code is good, now, the counts also relays on your html being correct, can i see your html code?

that explains the problem, there are two problems, you should never nest paragraphs in headings:

<h3 class="fancy">fancy heading</h3>
<!-- your paragraphs -->

This also explains the error, your third (last paragraph) is now body :nth-child(3), but the exercise will not accept that (since you need to select the 4th element)

Worked! Thank you very much!

If you look at the original lesson instructions, no space is needed between in front of the colon and you should identify the CHILD element, which is a paragraph:

"For example,

p:nth-child(2) {
color: red;
}
Would turn every paragraph that is the second child of its parent element red.

The element that is the child goes before :nth-child; its parent element is the element that contains it."

So the solution should be:

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

Problem is, I only get activity if I use “p:nth-child(3)” [changing to 36px will give the paragraph larger letters], but then the error message tells me that the current paragraph is undefined, If I use (4), I get no changes in the font and the SAME error message. What am I missing?

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class="fancy";>Better put a heading here.<h3>
		    <p class="fancy";>It'd be nice if you were clearer about what you want...</p>
		    <p id="serious";>I'll assume you want something written here, too...</p>
            <p>Final bit of writing goes here.</p>
        
	</body>
</html>
.fancy {
    font-family: cursive;
    color: violet;
}
#serious {
    font-family: Courier;
    color: #8c8c8c;
}
p:nth-child(4) {
    font-size: 26px;
}

Your h3 closing tag is missing a slash. That is what you are missing.

It should be p:nth-child(4), not p:nth-child(3), let me explain that. nth-child will count all elements, and if the 4th element is a paragraph, apply the styling between the curly brackets. A better way to explain this, would be to say:

p:first-child {color: red}

won’t be red, since the first element is a h3, not a paragraph, so that doesn’t match, so no red color is applied, does that make sense?

Thanks for the assist. The slash did it. I do understand how the p:nth-child works. What I pointed out was that the results were reacting to (3) instead of (4), which made no sense. But thanks!

A post was split to a new topic: Did you give your third paragraph a font-size of 26px?