Pseudo selectors 23 [Solved] Need space after "body" - descendant selectors vs pseudo selectors


#1

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

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

You need a space after "body".


#2

yes you do, you also understand why?


#3

also need help.here is my code


#4







<!--Add your HTML below!-->
	<h3 class="fancy">
	<p class="fancy">Wow!</p>
	<p id="serious">Hey!</p>
	</h3>
	<p>Yahoo!</p>
	
		</div>
	</body>
</html>

#5
<!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">
	<p class="fancy">Wow!</p>
	<p id="serious">Hey!</p>
	</h3>
	<p>Yahoo!</p>
	
		</div>
	</body>
</html>

#6

Why did you not make a new topic? Anyway, you should never nest paragraphs inside headings and vice versa, closing your heading before starting the paragraphs


#7

ok thanx.i saw my mistake.


#8

I have the space in my code, but I still am not able to pass the exercise.

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

serious {

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

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


#9

I found this answer with the best explanation:

https://www.codecademy.com/forum_questions/54e5e6fde39efee9a600180f

Let's do a little review:

div p

The above is known as a descendant selector.
It selects all P elements that are descendants of DIV elements.

Now consider,

body :nth-child(4)

This too is a descendant selector that selects ALL elements that are the fourth child of their parent.

p :nth-child(4)

is selecting all elements that are the fourth child of their parent, that are descendants of a P element.


p:nth-child(4)

is not a descendant selector, but a direct pseudo-class of P elements.

This selector matches every P element that is the fourth child of its parent:

<body>
  <p></p>
  <p></p>
  <p></p>
  <p>p:nth-child(4)</p>
  <p></p>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <p>p:nth-child(4)</p>
    <p></p>
  </div>
</body>

Roy 9 months ago

The space is an important character in a selector.
It represents a descendant selector.

p :nth-child(4) is the fourth child of a P element.

P elements cannot contain blocks, so in this case the child would be some inline component of the paragraph, like the fourth span, or fourth link, or just plain whatever is fourth.
EM, STRONG, I, B are also examples of inline elements (the caps are my shorthand).

p:nth-child(4) (no space) selects only a P, and then only if it is the fourth child of its parent element.

Notice how we climb back down the tree one generation with this selector?

Roy 9 months ago

As a stand alone or as a descendant selector, a pseudo-class is still a plain selector.

:nth-child(4) selects any fourth child anywhere in the document.

element :nth-child(4) selects only those fourth child elements that descend from 'element' (element in this case is the 'ancestor' since this can reach down many generations.

'element:nth-child(4)` can only select 'element if it is the fourth child of its parent element (could be any parent).

There is a distinction to be made here.
We should not be thinking in terms of advantages as much as specifics and appropriate usage.
They don't compare when viewed from the advantage point of view.
They are too different to be alternate choices.

We use the selector that has the least amount of specificity needed to match its target element.


Pseudo selector
#10

A little bit more now after reading this answer about descendant selectors vs pseudo selectors:
https://www.codecademy.com/forum_questions/54e5e6fde39efee9a600180f

p :nth-child(4)
is selecting all elements that are the fourth child of their parent, that are descendants of a P element.
p:nth-child(4)
is not a descendant selector, but a direct pseudo-class of P elements.
This selector matches every P element that is the fourth child of its parent.


#11

@cg0901, Did you understand the exercise? digitalsolver made beautiful explanation. If you still need help, pleas post your html code


#12

I had the code already working.
I just didn't understand the space after body.
The instructions might want to remind people of descendent selectors vs. pseudo selectors.

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".


#13

I am not paying attention, my apologizes @digitalsolver68272. Very good you solved it and understand it, and shared this beautiful explanation with everyone, it is a good one.


#14

I have the same error unable to pass. everything look exact same but still gives same error. HELP!


#15

Well, all it can take is a missing slash, and i am sure your code isn't a 100% match. Could you copy paste your html and css code to the forum so we can help?


#16

<!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"> 
		<p class="fancy">Practice Pragraph</p>
		<p id="serious">Second Paragraph</p>
		<p>third paragraph</p> 
		    
		</h3>
	</body>
</html>

and below is the stylesheet

.fancy{
    font-family: cursive;
    color: violet;
}
#serious{
    font-family: Courier;
    color: #8c8c8c;
}

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

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


#17

headings and paragraphs are not designed to be nested inside each other. it also messes up your count, now your paragraphs are first, second and third child of your heading (h3), so there is no 4th child. Close your heading before you start your paragraphs

for next time, use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard


#18

Thanks... Its working now...
was struggling from 4 days