Trouble with nth child link color (Lesson 18)


#1

I'm having some odd trouble with Lesson 18 (CSS Selectors). I follow the directions to change the link color for "a:first-child" and "a:nth-child(3)", but the link color for "a:nth-child(3)" doesn't change to #FFC125 in the preview screen. All the links change to the #CDBE70 color, not just the first link. This is index.html with paragraph tags. Yet, when I click Save and Submit Code, I get a message that says "Congratulations, you've finished this section!"

If I remove the paragraph tags, only the first link is color #CDBE70. The other two links are the default color. If I click Save and Submit, I get a message that I haven't changed the "a:nth-child(3)" link color.

If I change #FFC125 to a different color (if I just specify as "red", for example), I still have trouble with the link color. That is, it is color #CDBE70 if I use paragraph tags in my html; it is the default color if I don't use paragraph tags.

Can anyone help me figure this out?


#2

Can you CTRL + K Your Html Code so we can see it...


#3

css:

a:hover {
text-decoration: none;
}

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

a:nth-child {
color: #fcc125;
}


#4

Your third one change a to link like this

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

#5

I tried this and still no luck. The third link color stays the same.

I thought it might be a problem with my computer, but if I change #FFC125 to something different, I still have the problem with the link color.


#6

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

Try that code, On your index page there are 3 anchor attributes, even if you use the pseudo class first-child attribute it still counts as the first anchor on your page.


#7

here is the problem, all your links/anchor (<a></a>) are all first children of its parent paragraph (<p></p>). Now we are going outside of the scope of this exercise. If you think about, the paragraph are first child, second child and third child of body, so you could do:

p:first-child {}
p:nth-child(3){}

now, the problem is that links won't inherit much from parent, but we can just specify we want the link inside the paragraph:

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

so what we did here is: we use the paragraphs for first and third child (since the links in the paragraph are all first child of paragraph, so we can't use nth-child on the links to tell them apart). and then we specified we want the links inside this paragraphs, make sense?


#8

When I slightly modify stetim94's idea it works for me, now.

a:first-child { }
p:nth-child a { }

although, it does leave the middle line the same color as the first child


#9

but a:first-child will color all links, since all links are first child of <p></p>
this line:

p:nth-child a { }

just sucks, you can't have nth-child without a number. It seems you do not understand my explanation


#10

The pop up reminds me to Be kind to your fellow community members. "won't work" or "did you forget something" seems a whole lot kinder then 'just sucks'. Actually my code did have the (3) in it. I only forgot to type it in when I replied, sorry.

That exhortation aside; I have got it to work just the way lesson 18 says it wants, but I still get the OOPs message
"Oops, try again. Did you remember to set your first to the color #CDBE70?"

a:hover {
text-decoration:none;
}
p:first-child a {
color:#CDBE70;
}
p:nth-child(3) a {
color:#ffc125;
}
That is not exactly the way the lesson Hint section instructs, but following the hint exactly did not seem to work. The code above gets the three different colors, the hover change, etc. Could there be a glitch in that lesson's code? I do not mind having to think of ways to solve this, but when I go on to other lessons and then sign off, the next day it brings me all the way back to here when I sign on. Any advice?
Thanks for your help.


#11

like i said, we are going outside the scope of this exercise. You can't have your anchors/links in paragraphs, have all the colors correct and pass the exericse.


#12

Hi, everyone,

Thank you for taking the time to help me out. The exercise is working for me now.


#13

I have problem with first-child and I can't fix it


#14

you shouldn't have a colon after first-child


#15

thank you, I was sitting there, staring at it for 10 minutes, thaks


#16

I have the code just as above without the colon, and I have all colors the same. This happened to me in a previous lesson, I hit submit code and save, and it passed me. I just want to make sure the code is correct, and there is some other reason that the colors are not different.


#17

without colon it shouldn't work, without semi-colon it is fine for a single property + value, but i still recommend the semi-colon, if you decide to add more property's, and you forgot the semi-colon, nasty bug to fix


#18

I meant as the previous poster had a colon after the "first-child", I did not have that, but have the same problem. Even thought the code did not make the colors different, the program accepted that the coding was correct. Is that due to the computer not having the slight shading difference in the colors?


#19

this won't work, could you please post your full html + css code?


#20

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<!--Add your HTML below!-->
	<ul>
		<a href="http://www.esbua.org">Want to learn to umpire?</a>
		
		<li><a href="http://www.apwu.org">Join a union, earn fair pay</a></li>
		<li><a href="http://www.erikputerio.com>Create your own blog</a></li>
		</ul>
		
	</body>
</html>

css

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