23/23 Pseudo Selectors Codecademy SOLUTION


#1


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

This is CLEARLY a BUG in Codecademy program. I have tried everything.

Error:

Oops, try again. Did you give your third paragraph a font-size of 26px? It looks like it's currently undefined.


HTML:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class=fancy>
		<p class=fancy>One</p>
		<p id=serious>Two</p>
		<p>Three</p>
		</h3>
	</body>
</html>

CSS:

.fancy{
    font-Family: Courier, cursive;
    color: violet;
}

#serious{
    font-Family: Courier;
    color: #8C8C8C;
}

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

I have also tried CSS:

.fancy{
    font-Family: Courier, cursive;
    color: violet;
}

#serious{
    font-Family: Courier;
    color: #8C8C8C;
}

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


#2

body :nth-child(4)

is right but

p:nth-child(3)

is wrong.It should be

p:nth-child(4)

and make sure your browser zoom is 100% .


#3

Browser zoom is at 100%.

If body :nth-child(4) is correct why is it not working?

Your suggestion of p:nth-child(4) does not work.

This is clearly a bug in codecademy's program.

"Oops, try again. Did you give your third paragraph a font-size of 26px? It looks like it's currently undefined."

IT IS 26 PIXELS! I can even see this difference in the editor. This error makes no sense.


#4

Btw @rcodeman , p:nth-child(3) is correct. It shows up correctly in my browser. p:nth-child(4) does nothing.
body :nth-child(3) and h3 :nth-child(3) show up correctly in the browser as well. Still same error though. I get an error on all of them. This is clearly a bug in codecademy's site.


#5

sorry!i didn't see you nested p elements inside <h3> element.you shouldn't do that.
If you use W3C validator you'll get the following error
Error: Element p not allowed as child of element h3 in this context

so you should do something like

<h3>some text</h3>
 <p>some text</p>
 <p>some text</p>
 <p>some text</p>

there is question about it in stackoverflow.see here


#6
    So it should be like this?

    <body>
        <h3 class=fancy>
            <p class=fancy>One</p>
            <p id=serious>Two</p>
            <p>Three</p>
        </h3>
   </body>

Tried that:
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <h3 class=fancy>
            <p class=fancy>One</p>
            <p id=serious>Two</p>
            <p>Three</p>
        </h3>
    </body>
</html>

Still getting the error. It HAS to be a bug.

#7

you did it

 <h3 class=fancy>
       <p class=fancy>One</p>
        <p id=serious>Two</p>
        <p>Three</p>
   </h3>

i told you to do

<h3>some text</h3>
 <p>some text</p>
 <p>some text</p>
 <p>some text</p>

where did you close the <h3> tag ?and where did i close?


#8

OMG thank you @rcodeman . The H3 tag closing after the p's was the issue. Was not paying attention. The only difference in our two styles was that you used 1 space and I used 4, true? I know you are supposed to use 2 but tab is just so easy lol. Does the indentation really matter?


#9

Most welcome :slight_smile:
Actually i didn't notice about space.i just wanted you to see the cause of error.
and yeah tab is just so easy :slight_smile:

Indentation doesn't matter in html.but it's better to have because it's easier to read and so easily you can find your error.

read about it for more details here


#10

I have the same problem


#11

well, this topic now contains the solution? So should be able to find the problem (and solution), if not, go here and make a new topic


#12