Pseudo selectors


#1



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


It keeps telling me "Did you give your third paragraph a font-size of 26px? It looks like it's currently undefined."
I'm not sure what's wrong with my code. I checked everything, but couldn't find anything. Please help.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<h3 class="fancy"> 
		    <p class="fancy"> p1 </p>
	    </h3>
	    <p id="serious"> p2 </p>
	    <p> p3 </p>
	</body>
</html>

/*Add your CSS below!*/
.fancy {
    font-family: cursive;
    color: violet;
}
#serious {
    font-family: Courier;
    color: #8C8C8C;
}
body :nth-child(4) {
    font-size: 26px;
}


#2

Hey there, try this:


p:nth-child(4) { /* Using p should solve your issue */
font-size: 26px;
}

You haven't specified an element to the :nth-child pseudo selector. Your code says body so its searching for the third body tag use p if that what you want it to be the child of.

Here's a link to further explain. http://www.w3schools.com/cssref/sel_nth-child.asp

Hope this helps.


#3

The font got bigger, but the same error message popped up. I'm not sure what's wrong.


#4

Exactly the same error message? Make sure the p:nth-child(4) is set to 4.


#5

When I use

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

the font changes to 26px, but it still displays the error message.
When I use

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

the font shrinks to the default size.


#6

Have a look at this : https://codepen.io/anon/pen/MeKZOz. This is your code and it looks to me like it should work. Double check this with what you have.


#7

For some reason, the font-size changes to 26px when I use

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

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

but not

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

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

but in all cases, the error message still pops up


#8

All you need is the top one:
p:nth-child(3){
font-size:26px;
}

Get rid of all the others.


#9

Clarification: The font size changes with either of the top two cases, but the error message is still there.


#10

Try clearing your browser cache, you may need to log in again but your code should work.


#11

I just tried it, but it still doesn't work. (same message)


#12

I would just move on. You have learnt what that lesson is teaching and i see no problems with your code. Even compared it to mine and your fine. Just move along to the next exercise and check back at a later date.

Have fun


#13

oh well... Thanks for your help though.


#14

right, let me help you. You either need to use p:nth-child(4) or body :nth-child(4), but there is a problem in your html code. You shouldn't nest paragraphs inside headings (and vice versa, it is bad practice), the first paragraph should be after the h3 heading.

Nesting the heading and paragraph messes up the count, making it impossible to pass the exercise


#15

The problem isn't in the css;

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

That should work fine. But don't forget to target the fourth instead of the third because the h3 header counts as the first child. That's because we're counting the childs of the body and the third paragraph will be the fourth child.

The problem will be in the html.

<!--Add your HTML below!-->
<h3 class="fancy"> 
   <p class="fancy"> p1 </p>
</h3>
<p id="serious"> p2 </p>
<p> p3 </p>

In this lesson you've been asked to add a third paragraph to the html and give it the font-size of 26px using nth-child().
In the html that was already there there was one header and two paragraphs.

<!--Add your HTML below!-->
<h3 class="fancy">Well, hello there!</h3>                     <- a header (the first child of <body>)
<p class="fancy">All abort the CSS train!</p>                 <- the first paragraph (second child of <body>)
<p id="serious">Now let's get back to bussiness</p>           <- the second paragraph (third child of <body>)

The third paragraph should be inserted after that, as the fourth child of < body>.
But in your html you've put the first paragraph inside the h3 header.

I suggest you reset the code, and leave the h3 header and the first two paragraphs. And add another paragraph after the second paragraph. And then paste the css back in.
I hope I've been clear, this took way too long to write.


#16

why reset the code? You can simply put the first paragraph which is currently inside the heading after the heading (which is in the instructions of the lesson where you added the heading and first paragraph), and voila, you are doine :slight_smile:


#17

I reckoned it would be the easiest way to do it, he renamed all paragraphs and removed the h3 header which made it a bit of a mess in my opinion. But there are alway more way do do something :slight_smile:


#18

the heading (i prefer using heading, header might become confusing with the html5 <header></header> element) seems to be still there?

Yea, there are always multiply ways to achieve something.


#19

Yay, it worked. Thanks for the help.