Show it if you know it (18)


#1


Show it if you know it

All links same color as first-child. I understand that ea is in a line and that is the problem. but, how do I get ea link different colors and make them be in a column instead of a row? I also tried break.

Links change to different colors

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<ul>
		<li><a href="www.facebook.com">Again FB</a></li>
		<li><a href="www.instagram.com">Again InsGr</a></li>
		<li><a href="www.animalplanet.com">Again Cute Animal</a></li>
	    <li><a href="www.sky.com">Skies</a></li></ul>
		
	</body>
</html>

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


#2

Well, agree that the list items are first, second, third and fourth child of its parent unordered list <ul></ul>?

So we could use this:

li:first-child

but then we want to select the link inside the list, we can do this easily:

li:first-child a

same for the other ones, this goes outside of the scope of the exercise


#3

Oh, ok. I tried the first one. I'll try the second one, thank you!


#4

Awesome!, just playing around.


#5

The first one was just to show how to use the list tags (<li></li>) for the count, you understand why it works?


#6

I'm not understanding the question. The <li> with the a at end worked. I'm guessing it indicates the a after the list


#7

yea, exactly, we use the list tags (<li>) to do counting for us (since all the <a> are first child, so we can't use those for the count), and then we want to select the a element inside the list, so we do: li:first-child a

The a indicates we want the a element inside the list