Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript CSS Selectors Quickstart Pseudo-classes and Combinators Pseudo-classes Challenge

Posted by Caroline Chan
Caroline Chan
3,502 Points

Issue with task 2 out of 4

Hi all,

In task 2 out 4, the task is to set the last child to color: azure. I'm entering the following code: li:last-child { color: azure; }

I'm then seeing the 'well done!' message and can continue to the next question. It's worth noting that when I refresh the workspace, the last child item has been set to white (it's blank) and not 'azure'.

In task 3 out of 4. When I'm asked to set the even list items to color dodgerblue, I enter the code: li:nth-child(even) { color: dodgerblue; }

This throws up an error relating to the previous question 'are you setting the last item to color azure?', even though the workspace shows the even items in dodgerblue.

So there seems to be an issue with 2 out of 4 but I can't see what it is. As I'm being told it's correct but in 3 out of 4, then I see the error message. I've contacted the support team who have advised it's not a bug (they tested it) and other students have been able to get past it. Even if my code is wrong in 2 out of 4, I'm getting the 'well done!' message so it still must be a bug?

Any help here is appreciated!

Thanks in advance,

Caroline

style.css 
/* Complete the challenge by writing CSS below */
li:first-child {
color: white;
}

li:last-child {
  color: azure;
}

li:nth-child(even) {
  color: dodgerblue;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Pseudo-classes Challenge</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul>
      <li>Papayas</li>
      <li>Avocados</li>
      <li>Pineapples</li>
      <li>Grapefruits</li>
      <li>Pomegranates</li>
      <li>Tamarinds</li>
      <li>Kiwis</li>
      <li>Lemons</li>
      <li>Bananas</li>
      <li>Tomatoes</li>
    </ul>
  </body>
</html>

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Task 3 is to set the background color not color. By setting color you are overriding the value for task 2.

Caroline Chan
Caroline Chan
3,502 Points
Caroline Chan
Caroline Chan
3,502 Points

Thank you so much Kris!