Lesson 23 Pseudo selectors


#1

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?


#2

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


#3

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.


#4

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


#5

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


#6

anyone know the solution? :frowning:


#7

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


#8

@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


#9

font-size you should enter


#10

Well spotted! I missed it


#11

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;
}


#12

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?


#14


#15

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)


#16

Worked! Thank you very much!


#17

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;
}

#18

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?


#19

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!


#20

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


#21