Pseudo selectors 23


#1

Could you check my code please? I must be doing something wrong...

<!DOCTYPE html>






	<h3 class="fancy">This is a h3 header</h3>
	 <p class="fancy">This is a paragraph</p>
	 <p id="serious">This is a serious paragraph</p>
	 <p>This is a 4th child aparently.</p>

</body>

CSS:

.fancy {
font-family:Cursive;
color:violet;

}

serious {

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

}

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

I can't get the text size to change for the nth-child(4)


#2

There are two ways you can use nth-child(4) in this case:

body :nth-child(4)
p:nth-child(4)

(note where i put the spaces around the colon), when use you use body :nth-child(4) you select the 4th element inside body, when using p:nth-child(4) you select a paragraph which is 4th child of a element.


#3

Ah yeah I see, So why was body: nth-child(4) not working?


#4

Because whoever build the nth-child, decide that body :nth-child and p:nth-child are the syntax, and not a combination of those. body: nth-child simple is invalid syntax


#5

Aaaaah, I didn't see the space was after body, thanks :smile:


#6

I mention it in my original answer:

That you have to look closely where the spaces are.


#7

I'm having the same problem, but I did put the space between the "body" and the ":nth-child(4)" and I'm still getting the error message.


#8

I cut/pasted from the code provided here. It was rejected.

Out of curiousity, I tried changing things other than the font size. NOTHING (tried changing font. color, etc, using the right syntax. Also giving "body" an id, and using that as the CSS identifier. Nada.


#9

I explained in the topic you created that you h3 closing tag is missing a slash. Plus, you said there that you resolved the issue, please let us know in this post your resolved as well, so we know we don't have to look into it anymoer


#10

Im also stuck here. Everything has been done in accordance to the instructions.

The code:




</head>
<body>
	<!--Add your HTML below!-->
	<h3 class=fancy>Jaman</h3>
	<p class=fancy>Kan inte</p>
	<p id="serious">Skojar enteeee</p>
	<p>Dödsallvar bror</p>
</body>

CSS:
.fancy{
font-family:cursive;
color:violet;
}/*Add your CSS below!*/

serious{

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

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


#11

I would like to quote my earlier answer.

now take a close look at your nth-child, and the specifically the spacing around the colon.It is a bit frustrating if you have to repeat yourself


#12

I'm also having problems with this lesson, after reading your solutions i don't resolve my problem.








Graphic Monarchy

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.


Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.


Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.



/*Add your CSS below!*/
.fancy{
font-family: cursive;
color: violet;
}

serious{

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

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


#13

Can i see your html code? if you edit/update your question, leave a reply so i get a notification. Your html code is not visible, take the following steps to make your code visible:

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


#17

no, you should just insert the back-ticks before and after your code. <p>visible</p> was just some example code


#18
indent preformatted text by 4 spaces<img src="//codecademy-discourse.s3.amazonaws.com/original/4X/0/c/e/0cedd9364517075d9edde2778013ec8b3178859f.png" width="555" height="500"> sorry i didn't understand

#19

try the following: select the code (using your mouse) and press ctrl + k (or cmd + k if you have a mac computer)


#20

and then? what do i need to do?


#21

that is it, you copy your code to the forum, select the code and press ctrl + k. Then your code is visible.


#22
indent preformatted text by 4 spaces

#23

damn what a hussel to fix this, don't understand what i do wrong.