Show it if you know it


#1

I've passed this one, but the actual result of the code doesn't work, any clues why?
Just curious.

EDIT: It's worth mentioning I've also tried body and p in place of the a on the first-child argument.

HTML:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	    <p><a href="www.lvbeethoven.com/Bio/BiographyLudwig.html">Beethoven</a></p>
	    <p><a href="www.imdb.com/title/tt0094721/">Beetlejuice</a></p>
	    <p><a href="www.bbcgoodfood.com/howto/guide/ingredient-focus-beetroot">Beetroot</a></p>
	</body>
</html>

CSS:

a:hover {
    text-decoration:none;
}
a:first-child {
    color:#CDBE70;
}
a:nth-child(3) {
    color:#FFC125;
}

#2

We are going outside of this lesson now, the problem is that your links are all first child of paragraph, does that make sense? But the good news is, we do have three paragraphs, which are are first, second and third child, which suggest this:

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

but you tried that, and discovered it doesn't work. This is because links won't inherit from parent. But hold on, we can just select the link inside the paragraphs:

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

voila, we use the p:nth-child(x) to tell which paragraph we want to select (since the links are all first child of paragraph) and then select the link inside this paragraph, make sense?


#3

Very clever. I'll use that for future reference, thank you very much :smile:


#4

Thank you, you understand why this works? Does it make sense what i did?


#5

I'm actually somewhat confused about why this is the case, but I've sort of been struggling with cascading CSS throughout so, please forgive my ignorance.

In my HTML for this exercise, there is no actual <p> element. Personally, I made my three links <ul> elements, and then each child element (if I understand cascading correctly) is technically an <li> element. So why isn't the CSS selector something like

ul:nth-child(3) {
color: #whatever;
}

That's what confuses me. Thanks for any feedback!

EDIT:
I wrote this before implementing the code above using the syntax provided by stetim94 and it appears not to do anything at all - I'm confused about what I'm doing incorrectly.


#6

No, there are no paragraphs, but no list either. My instructions where for the paragraphs. You made this:

<ul>
  <li><a href="#">something</a></li>
  <li><a href="#">something</a></li>
  <li><a href="#">something</a></li>
</ul>

? It should be li:nth-child(3). nth-child select the third element, if it is list (<li>), in your case, it select the third element of any parent which is a unordered list


#7

Cool, I just saw this and was experimenting. Using

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

works. I'm just confused then about the nesting/cascading here, and will have to keep reading/practicing. Thanks for the help though.

EDIT: This works in the sense that it produces the desired result, but it does not allow me to pass this section of the course.


#8

THIS WORKED







<a href="http://pixar.wikia.com/wiki/Edna_Mode">Edna Mode></a><br>
<a href="https://uk.pinterest.com/ellarthompson/great-quotes">Edna Mode Quotes></a><br>
<a href="https://uk.pinterest.com/ellarthompson/great-quotes">Edna Mode do not distract from the now></a>

	<!--Add your HTML below!-->

</body>

a:hover{
text-decoration:none;
}
a:first-child {
color: #CDBE70;
}

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


#9

well, you use li:nth-child(3) to select the third list, and then you want to target the link in the list, so it become li:nth-child(3) a


#10

OK...I got stuck here big time. Now, I understand what you did here and it makes sense but, when I try it on my code...it works but I can't get through.

What have I done wrong here?



#11

I told you, where where going outside of the scope of the exercise, to pass the exercise you simple need a:first-child and a:nth-child(3) even though this won't apply nice styling to your links


#12

Oh...ok. This worked. But I was confused cuz it didn't apply any stlying to the link. I even tried using ID's on 1st and 3rd link...got the result that we needed but couldn't pass..

Thanks a lot... :slightly_smiling:


#13

Yes, this will not apply the styling correctly, in the answer i explain why this is. I also say, it is outside of the scope of the exercise, which means you can't use it it to pass the exercise


#14

Whats amazing is I've had the same code for an hour now. I even went as far as copying yours and pasting just in case.
And still gives me the same error "OOPS, try again. Did you remember to set your first to the color #CDBE70?
I've tried Chrome, Firefox and IE and still here.
What a waste


#15

Could you post both your html and css code? (copy paste it to the forum, not a image please)