Lesson 18: Show It If You Know It! Color not changing


#1



Html:
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<li> <a href="http://www.codecademy.com/" >codecademy</a> </li>
		<li> <a href="http://www.facebook.com/" >facebook	         </a> </li>
		<li> <a href="http://www.amazon.com/" >amazon	         </a> </li>
	</body>
</html>
Css:
a:hover{
    text-decoration:none;
}
a:first-child{
    color:#CDBE70;
}
a:nth-child(3){
    color:#FFC125;
}


#2

@jon7280,
Display the full code you are using

Please re-edit your Post

  • leave one blank-line above of your code
  • select your code in the Post
  • then =click= on the </>-symbol-of-this-editor

Your code will then be in a pre-code state
and you will be able to make/present the proper indentations.

or even better use
= http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697/2
[extra's]
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet


#3

Here you are: I am no idea why the link doesnt change the color. Can someone help me this question?


#4

@jon7280,
You have NOT included any code....


#5








  • codecademy

  • facebook

  • amazon



  • #6

    Hi Leonhard:

    May I know what did you mean by this? Thank you very much.


    #7

    @jon7280

    Please re-edit your Post
    •leave one blank-line above of your code
    •select your code in the Post
    •then =click= on the </>-symbol-of-this-editor


    #8

    @leonhard.wettengmx.n Thanks, but if I want to list them can I do it?


    #9

    @jon7280,
    Try using a space character between your definition like

    a :first_child

    #10

    Not really comes up man. Can you post the whole html and Css? Thank you very much


    #11

    I think if I don't add a


  • it is fine but when I add the

  • on then the color doesn't comes out. ;(

  • #12

    @jon7280,
    The thing is if you are working with the CSS nth facility
    CSS will step up to the parent HTML element
    and will then interprete the rest....
    In the following example the body-Tag will be the parent Element

    <!DOCTYPE html>
    <html>
    	<head>
    		<!-- <link type="text/css" rel="stylesheet" href="stylesheet.css"/> -->
    		<title>Result</title>
    		<style>
    		a:hover{
        text-decoration:none;
    }
    a:first-child{
        color:#CDBE70;
    }
    a:nth-child(3){
        color:#FFC125;
    }
    		</style>
    	</head>
    	<body>
    		<a href="http://www.codecademy.com/" >codecademy</a>
    	    <a href="http://www.facebook.com/" >facebook	         </a>
    		<a href="http://www.amazon.com/" >amazon	         </a>
    	</body>
    </html>

    OR
    the ul-Tag is the parent in

    <!DOCTYPE html>
    <html>
    	<head>
    		<!-- <link type="text/css" rel="stylesheet" href="stylesheet.css"/> -->
    		<title>Result</title>
    		<style>
    		a:hover{
        text-decoration:none;
    }
    li:first-child{
        color:#CDBE70;
    }
    li:nth-child(3){
        color:#FFC125;
    }
    		</style>
    	</head>
    	<body>
    	<ul>
    		<li><a href="http://www.codecademy.com/" >codecademy</a></li>
    	    <li><a href="http://www.facebook.com/" >facebook	         </a></li>
    		<li><a href="http://www.amazon.com/" >amazon	         </a></li>
    	</ul>
    	</body>
    </html>

    #13

    Do you have the links (<a></a>) inside a list (<li></li>)?

    The problem is, that the exercise assumes you nest the links directly inside the body, you didn't, which is fine, but we need to make some modifications to your code. (this won't work in the exercise, and goes outside the scope of the exercise)

    What is the problem? If you have lists, all link are first child of the list (Which is why the color won't show), can we overcome this problem? Yes we can.

    It seems i need to make step, a list tag (<li></li>) should always have a unordered:

    <ul>
       <li></li><li></li><li></li>
    </ul>

    or ordered list as parent:

    <ol>
       <li></li><li></li><li></li>
    </ol>

    Now, we can use this to solve our problem. the list tags are first, second and third child of the (un)ordered list:

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

    then we can simply specify we want to select the links inside the lists:

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

    so, we use the list tags for counting, and then target the link element inside