18. Show it if you know it! I don't understand why my code is not working here


#1


https://www.codecademy.com/courses/web-beginner-en-WF0CF/3/5?curriculum_id=50579fb998b470000202dc8b#


So I was trying to be fancy. I tried to align the links in the middle with a .link class in CSS tab to make it look better. But when I try to set the first child, or any child, it just doesn't work no matter which I use. a, p, body, nothing. Doesn't work like it should.


//HTML

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<p class="link"><a href="www.youtube.com">Youtube</a></p>
		<p class="link"><a href="www.miniclip.com">Miniclip</a></p>
		<p class="link"><a href="www.netflix.com">Netflix</a></p>
		
	</body>
</html>

//Below here be CSS

/*Add your CSS below!*/

.link{
    text-align: center;
}

a:hover{
    text-decoration: none;
}

a:first-child{
    color:#CDBE70;
}

a:nth-child(3){
    color: #FFC125;
}

Thanks.

Edit: An additional question as well; I thought parents and children were what was nested in what. But with this new information with nth child and all that in CSS it just tosses that out the window as far as I can see. Logically I'd think that the first child of body would be the paragraph, then the second would be the link. I'm not sure what I'm missing there.


#2

okay, lets break it down. Inside body we have 3 paragraphs. which are first, second and third child. Then inside the paragraphs, we have anchor elements (<a></a>) which are all first child of there parent (paragraph), with this knowledge, we could argue that we can use p for counting, and then select the anchor element inside given anchor doesn't inherit:

p:first-child a
p:nth-child(3) a

problem: the exercise validation doesn't like you doing this, you won't pass


#3

I actually just figured that out a minute ago, but thanks for explaining it! :slight_smile:


#4

Thank you for answering this! I have been stuck! I was going crazy trying to figure it out on my own! Appreciate the help.


#5

Okay... still have a problem. The code shows up on the page but it doesn't validate. What am I missing to allow the validation?


#6

^? You need a:first-child and a:nth-child(3) to pass, if you still have a problem post your html and css code


#7



Arts & Culture

	<p>
	    <a href="https://www.google.com/earth/explore/showcase/hubble20th.html#tab=v-838">Exploration</a>
	</p>

	<p>
	    <a href="https://www.google.com/search?q=I%27m+Feeling+Curious&csf=b&ct=ifl&cad=2:curious&ei=t9e5V4eTNIPNeu26g5AB&ved=&rct=j">Search</a>
	</p>

a:hover {text-decoration:none;}
p:first-child a {color:#cdbe70;}
p:nth-child(3) a {color:#ffc125;}


#8

Did you read my answers in this topic? It should answer your question


#9

I read the above answer. I do not see any others. Where would I find them? This is my first time on the Q&A board so may need a little direction. Thanks!


#10

i mean in this topic? I specifically mention (multiply times by now) that p:first-child a won't get you pass the exercise, because the exercise sort of assumes you nest the anchors directly inside the body. Now, you don't have to do this, but in order to pass your css should be a:first-child (without p)


#11

Okay. I got it to pass. My problem was that in the page view it is showing that everything is the same color so it appeared to me that it wasn't working so I wasn't clicking on submit. Thank you for your help.