23. Pseudo selectors

Help me, please! I think it’s right. Isn’t it?

Your css is right, but it only works if your html is right as well, can i see your html code? preferable copy your code to the forum, rather then a image

if you edit/update your question, leave a reply so i get a notification. this might help you in making your code visible:

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


the backtick is located above the tab key on your keyboard

<!DOCTYPE html>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	<h3 class="fancy">
	<p class="fancy">Wow!</p>
	<p id="serious">Hey!</p>

you can’t nest paragraphs inside headings (h3 in this case), close your h3 before starting with the paragraphs.

You do understand why body :nth-child(4) can’t possible work on that html code?

Right! Thank you so much. Such a stupid mistake.

do you understand nth-child? That is more important then passing this exercise

Yes, I understand, thank you!

I don’t think that I under “nth-child” would you be able to explain this to me?

let’s take something simple, lets say we have this html code:

  <h1>i am a heading</h1>
  <p>i am a paragraph</p>

now, i can do body :nth-child(1). this will select the first element inside body (h1). Note the space between body and :nth-child(1), this space is crucial. you could also do h1:nth-child(1) (notice that there is no space). This way, it will select any h1 element which is first element. So, body :nth-child selects inside body (due to the space between body and :nth-child, and h1:nth-child will select the h1, if it is a first child.

Okay, now what do you think i need to select the paragraph? p:nth-child(1)? You would be wrong, it would be p:nth-child(2), why? nth-child will count all elements, and if the css selector (p) in this case, is a match to html element, execute the css code between curly brackets. A better way to explain this, would be to say that p:nth-child(1) won’t execute, because the first element is a h1, not a paragraph.

This is where the difference comes in, body :nth-child(1) would always apply the styling, p:nth-child(1) only would if the first element was actually a paragraph.

I know, confusing, but i hope it helps

A post was split to a new topic: 23.pseudo selectors