Pseudo selectors, Lesson 23/23


#1

I'm having an issue where my code is correct (I think) yet it doesn't apply to the window, I've messed about and changed everything I could with no avail. Here is my code, it involves body: nth-child(4). I've removed the # from serious because it caused font issues in this document, my actual code has it.

Html

<head>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	<title>Result</title>
</head>
<body>
	<h3 class="fancy">Text1</h3>
	<p class="fancy">Text2</p>
	<p id="serious">Text3</p>
	<p>Problem</p>
</body>

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


#2

when you want to select the 4th child (in this case the 4th child of body) you need to use body :nth-child(4), notice the space between body and the colon. You can also use p:nth-child(4) (note: no spaces)

Conclusion: the spacing is quit critical when it comes to dealing with the nth-child selector.


#3

Alright thank you, but when I put a space between body and nth-child(4) nothing changed. But when I used p:nth-child(4) it worked.


23.Pseudo selectors. whats wrong?
#4

Do you also understand why it works? that is far more important


#5

I understand why the p:nth-child(4) worked but I don't understand why body: nth-child(4) though. I'm doing this as apart of a school class, and I asked around and this hasn't been an issue with other people.


#6

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+----------+
       |                |
     head              body
       |                |
    +--+--+       +---+-+-+---+
    |     |       |   |   |   |
   link  title    h3  p   p   p
                 (1) (2) (3) (4)
                  |   |   |   +- :last-child or :nth-child(4)
                  |   |   +- :nth-child(3)
                  |   +- :nth-child(2)
                  +- :first-child or :nth-child(1)

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
is also called document
html-Element is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.
head and body are both descendants of html

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'body'-Element is parent to 4 children
h3 p p and p
These h3 p p p Elements are children of the body-Element
and are descendats of the html-Element and the body-Element
The h3 p p p Elements are sibling's to each other.

https://api.jquery.com/nth-child-selector/


Problema na questão
#7

I have tried this answer, and every other possible way to change this font. Attempted on on 2 computers now. Logged out and back in. I think there is a glitch. I'm so frustrated. Someone please help. Thanks!

Here is my code:

HTML:

<body>
		<h3 class="fancy">Header!</he>
		<p class="fancy">I am a paragraph!</p>
		<p id="serious">Why so serious?</p>
		<p>FOURTH CHILD</p>
	</body>

CSS:

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

#8

As stetim94 stated the space between body and nth-child() is MANDATORY
like

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

#9

@ninjaskilz666, like i said in my earlier answer, if you want to use body in combination with nth-child the spacing is crucial. the space between must be between body and the colon, like this: body :nth-child(4), you have the spacing at the wrong place.

@corieller, ignore leon's answer, body :nth-child(4) is correct, however your h3 closing tag (</h3>) is off, which mess up the count, which is why your code is not working.

@leonhard_wettengmx_n, body :nth-child(4) is correct, body :nth-child(4) will select the 4th element inside body, where as body:nth-child(4) will check if any nested 4th element is body, which there isn't


#10

Thank you! I knew I was doing it right! Weird that I don't remember even touching the code for h3, since it was already generated for us.


#11

You're welcome, well yea you touched the h3 tags, you created them (and the paragraphs) in exercise 21 and exercise 22. The code "generated" was just loaded from the previous exercise


#14
<body>
<h3 class="fancy">Header!</h3>
	<p class="fancy">I am a paragraph!</p>
	<p id="serious">Why so serious?</p>
	<p>FOURTH CHILD</p>
</body>

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

Why am I getting this wrong?


#15

There are a couple of possibilities;
Your link to stylesheet is faulty, one of your other css selectors is missing a closing curly bracket (}), or you hit a glitch. Can you provide full html + css code?

If you hit a glitch, try a different browser, that generally works. If that doesn't work, post your full html + css code


#16

Why does there need to be a space in body :nth-child(4)? I understand that this works, but what's the explanation? Conversely, why does p:nth-child(4) not need a space? Also, isn't the third paragraph the 3rd child of p? Why is it written as the 4th child?


#17

Never mind - I think I understand it now, but please correct me if I'm wrong. Having a space between body and the colon in body :nth-child(4) indicates "find the 4th element that is a child of body", but p:nth-child(4) means "find a paragraph that is a 4th child". So am I correct in assuming that any paragraph that is a 4th child would be affected, not just the one we see in body?


#18

this bit:

Having a space between body and the colon in body :nth-child(4) indicates "find the 4th element that is a child of body", but p:nth-child(4) means "find a paragraph that is a 4th child".

You absolutely nailed it.

and then this bit:

So am I correct in assuming that any paragraph that is a 4th child would be affected, not just the one we see in body?

you nailed it even further, as you can see in this bin, both 4th paragraph inside body and div are target. Also, back to the code of the exercise:

<h3 class="fancy">Header!</h3>
<p class="fancy">I am a paragraph!</p>
<p id="serious">Why so serious?</p>
<p>FOURTH CHILD</p>

it is p:nth-child(4) because nth-child counts all elements and if 4th element is paragraph, "execute" the css code between the curly brackets. Easier way to explain this: p:first-child would have no effect because the first element is a h3, not a paragraph.

Just an extra, there is also a nth-of-type selector, in that case it would be (assuming exercise code) p:nth-of-type(3) because nth-of-type only counts the paragraphs.


#19

you'r a life saver !


#20

You're welcome, good my answer helped you


#21

'






Header!


I am a paragraph!


Why so serious?


FOURTH CHILD



.fancy{
font-family:cursive;
color:violet;
}

serious{

font-family: Courier;
color:#8c8c8c;

}

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

I used a different browser and it still says I'm wrong.


#22

never mind I figured it out