We can't figure this one out


#1

Okay I am stuck on Pseudo selectors (CSS Selectors part 23). I have tried it many different ways and get a techie involved and he couldn't figure out what is wrong so yeah need help.

The text says to "Add a third paragraph to the HTML document. On the CSS tab, use nth-child to give it a font size of 26px. Remember: your paragraph is the third paragraph, but the fourth CHILD of body. The h3 counts as the first child!"

And the hint says "That means you'll need to use nth-child(4) to select your paragraph on the CSS tab.

If you're getting strange numbers for your font-size, type Ctrl-0 or Cmd-0 to reset your zoom!

Make sure to leave a space between body :nth-child. If you don't have a space it means "find the body tag that is an nth-child". If you have a space it means "find the nth-child of the body tag"."

So I have tried this many different ways and can't seem to figure out what I've done wrong...

Help please!!


#2

Never nest paragraphs in headers (h3) and vice versa:

<h3 class="fancy">header</h3>
<p class="fancy">paragraph</p>
<!-- remaining two paragraphs -->

now body :nth-child(4) should work. Do you understand nth-child? Let's say we have this code:

<body>
  <h3>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
  </h3>
</body>

there is no 4th child, h3 is first child of body, the paragraph (ignore wrong nesting) are first, second and third child of h3.


#3

Oh that was a real stupid overlook by me! It works now...

@stetim94 you are going to be my new best friend lol :grin:


#4

Can't get this one too. I tried body:nth-child(4) but it says the third paragraph is undefined. p:nth-child(3) only seems to change the text size but it still says it doesn't work.


#5

there are two things which can work, the first one is:
body :nth-child(4)
note the space between body and :nth-child, this space causes to select the 4th element inside body.
the second option is to use:
p:nth-child(4)
yes, it is 4 not 3. nth-child counts all element, and if 4th element is paragraph, "execute" code between curly brackets. A better way to explain this is that p:first-child won't do anything, because the first element is a h3, not a paragraph