23. Pseudo Selectors - Did you give your third paragraph a font-size of 26px? It looks like it's currently 16px


#1


I have reset the zoom and tried it on two different computers. I am still getting the error "Oops, try again. Did you give your third paragraph a font-size of 26px? It looks like it's currently 16px."

I don't see anything wrong with the code. Can anyone 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"> header</h3>
	    <p class="fancy">paragraph 1</p>
	    <p id="serious">paragraph 2</p>
	    <p>paragraph 3</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

There is only one body element, not multiple as implied by your selector. Consider,

    selector:nth-child(n) /* no white space */

The nth child that is the same type as the selector.

    p:nth-child(4)

This will target the P-node that is a fourth child of the parent element.

    :nth-child(4)        /* yes, this is legitimate */

This will target any type that is the fourth child of its parent element. Either of the above two will work in your case.

The last example,

    div :nth-child(4)    /* with white space */

This will target the fourth child of any type that is a descendant of a DIV-node. We could, in your case, substitute body but that is moot. The simple selector above will do as much, anyway.


[FAQ] Common Problems #Read Me
[FAQ] Common Problems #Read Me
#3

thanks for your help. i have tried it with and without whitespace, but i still get the same error.


#4

Sorry to hear that. Did you try,

:nth-child(4)

?


#5

yes, i have tried this code


#6

I got the solution. The correct way to do is with a space between body and : like this --

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


#7

Try it without body in the selector (else insert a space before the :)


#8

This is the code that worked for me:

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

"The element that is the child goes before :nth-child"
So I understand, it must be p, not body.


#9

p shouldn't work in this exercise if you used the same html structure that i did above.


#10

Guys, there are two solutions: p:nth-child(4) and body :nth-child(4), both work (be it for different reasons). With body :nth-child(4) you select the 4th child inside body (notice the space before the colon) and p:nth-child(4) which will target any paragraph which is 4th element of any parent


#11

@jen-v, @clairethebear88,

https://api.jquery.com/nth-child-selector/
http://stackoverflow.com/questions/6822821/jquery-nth-child-selector-not-working

Play around using

body :nth-child(4) {font-size:26px; color:red;}
body:nth-child(2) {font-size:26px; color:red;}
p:nth-child(2) {font-size:26px; color:red;}
:nth-child(2) {font-size:26px; color:red;}

#12

The only way I could get this to work was to add A 4Th paragraph.


#13

Then you did something wrong. 3 paragraphs should be enough.


#14

This was the only way I could get through this part of the course as well. Maybe there's something wrong with the lesson? The hint even tells you that the code is "body :nth-child(4) {...", but it kept saying I haven't selected anything.


#15

well, the css selector only works if the html code is correct as well. The instructions are fine, i checked it many times. If you want me to have a look at your code, please post it. I can also explain why something did(n't) work as expected


#16

2 posts were split to a new topic: 23. Pseudo Selectors


#17