CSS Selectors: Lesson 18 - Show it if you know it


#1

I've been looking at answers here in the forums (Thanks to stetim94) and found code that works, and have used two different methods to produce the same result. Unfortunately, neither method allows for the course to pass. The HTML I used:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<p><a href="http://www.google.com">First link</a></p>
		<p><a href="http://www.google.com">Second link</a></p>
		<p><a href="http://www.google.com">Third link</a></p>
		
	</body>
</html>

I used this HTML because it divided the links into (visually) separate elements and was also in keeping with the CSS syntax being used for the "nth-child" selector. Using this CSS with the above HTML I get the desired result, but the course will not acknowledge it as correct:

/*Add your CSS below!*/
a:hover {
    text-decoration: none;
}
p:first-child a {
    color:#CDBE70;
}
p:nth-child(3) a {
    color:#FFC125;
}

Like I said, the above combination works, the links are the correct colors (I even used a color picker to verify that the colors were right because the error I'm getting says "Oops, try again. Did you make sure to set your first <a> to the color #CDBE70?"). In any event, everything is correct in preview, just won't let me pass the course.

The second method I used was basically the same, just using different elements and therefore selectors. Essentially, instead of using <p> elements, I used a <ul> element, and in CSS the selector that worked (produced the desired outcome) was as follows:

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

and so on, which also worked correctly, but would not allow a "pass" for the course

Not sure if this is a bug or if I'm simply doing it wrong (which is the likelier scenario).


#2

Like i said in the answer you read, this is going outside of the scope of the lesson. The lesson sort of assumes you nest the links directly in body