23. Pseudo selectors


#1

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


#2

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


#4

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:

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

the backtick is located above the tab key on your keyboard


#5
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	<h3 class="fancy">
	<p class="fancy">Wow!</p>
	<p id="serious">Hey!</p>
	<p>Yahoo!</p>
	</h3>
		
	</body>
</html>

#6

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?


#7

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


#8

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


#9

Yes, I understand, thank you!


HELP! Pseudo selectors 23!
#10

I don't think that I under "nth-child" would you be able to explain this to me?


#11

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

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

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


#13

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


#14