This forum is now read-only. Please use our new forums! Go to forums

banner
Close banner
0 points
Submitted by xquesarahsarah
over 8 years

23/23 - totally stuck

Hi, I haven’t got a clue why my code isn’t working - wondering if someone could point me in the right direction? I’m trying to make the third paragraph font sized 26px.

My HTML is: 

  <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title>Result</title>
        </head>
        <body>
            <H3 class="fancy">Header</h3>
            <p class="fancy">paragraph</p>
            <p id="serious">2nd para</p>
            <p>third para</p>
        </body>
    </html>
    
My CSS is:
.fancy {
    font-family:cursive;
    color:violet;
}

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

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

Answer 55ffba8f95e3785bd900033c

1 vote

Permalink

two problems, your h3 opening tag should be lowercase. and it should be body :nth-child(4), the third paragraph is the 4th element.

points
Submitted by stetim94
over 8 years

2 comments

Aknapp1212 over 8 years

p: nth-child(3) as well as body: nth-child(4) does not work

JawharrahCabral over 8 years

Same here ! not working !!!!

Answer 560005dc95e378989a000081

0 votes

Permalink

@Aknap, of course neither of those work.

If you want to select the child you use body :nth-child(4) (notice the space is between body and colon, not between colon and nth).

If you want to use p:nth-child(3) there shouldn’t be any spaces between p, the colon and nth.As you can see, the spacing is really important. And if you want to use p:nth-child, it is still nth-child(4), nth-child counts all elements (including h3) and if the 4th element is paragraph, execute the css code.

a better way to explain this, would be to say: what happens when i have p:first-child {color: red}. Nothing would happen (assuming html code from exercise), because the first element is a h3, not a paragraph.

points
Submitted by stetim94
over 8 years

Answer 56010bee9113cb6c8b000455

0 votes

Permalink

your paragraph is the third paragraph, but the fourth CHILD of body. The h3 counts as the first child!

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

points
Submitted by Sharon.Z
over 8 years

2 comments

stetim94 over 8 years

it is p:nth-child(4), use lowercase p. It otherwise might get you into trouble

Sharon.Z over 8 years

tks

Answer 5601a352e39efe3ac40005a8

0 votes

Permalink

I’m having a problem as well. If I do:

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

it works, i.e., the font changes, but I get an error message: “Oops, try again. Did you give your third paragraph a font-size of 26px? It looks like it’s currently undefined.”

If I try: body :nth-child(4) { font-size:26px; } the font doesn’t change and I get the same error code.

points
Submitted by jesmcgrath
over 8 years

1 comments

stetim94 over 8 years

can you post the rest of your css and your html code? p:nth-child(3) is wrong, nth-child counts all elements (including h3). if you use p:nth-child(3) you select second paragraph, third element. you should see as: count all elements, and if element match, execute css, otherwise do not execute. p:first-child wouldn’t do anything, because first-child is a h3, not a paragraph

Answer 5601c51351b887160300012d

0 votes

Permalink

stetim94:

 <body>
       <h3 class="fancy">
        <p class="fancy">First paragraph. </p>
        <p id="serious">Second paragraph.</p>
        <p>Third paragraph.</p>
    </h3>
</body>

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

points
Submitted by jesmcgrath
over 8 years

3 comments

jesmcgrath over 8 years

I looked at another answer, and found that it’s a bug and I had to add a 4th

tag. It worked. thanks! jesmcg…

JawharrahCabral over 8 years

Yes @jesmcgrath ! Yes !!!!!! This Worked !!!!!! Thanks !!!!! <3 < 3 <3

stetim94 over 8 years

well yes, adding a 4th paragraph inside h3 will work, because then paragraph is 4th child of h3. But it is still wrong. headers (h3) and paragraphs are logical tags; their use imparts meaning to the enclosed text, not other block level tags (paragraph, headers); Yes, h3 and paragraph are block level elements

Answer 5601cee03e0ec864000000df

0 votes

Permalink

True, adding a 4th paragraph will do the trick, but it is wrong. You can never nest paragraphs inside headers (h3 in this case) and vice versa. It should have been:

    <h3 class="fancy">i am a header</h3>
    <p class="fancy">First paragraph. </p>
    <p id="serious">Second paragraph.</p>
    <p>Third paragraph.</p>

and then body :nth-child(4) or p:nth-child(4) works like intended.

points
Submitted by stetim94
over 8 years

2 comments

JawharrahCabral over 8 years

Yes !!!!!! This Worked !!!!!! Thanks !!!!! <3 < 3 <3

stetim94 over 8 years

you’re welcome

Popular free courses

Explore full catalog