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

General Discussion Sass Basics (retired) Getting Started with Sass Advanced Nesting

Aman Tohan
Aman Tohan
14,822 Points
Posted by Aman Tohan
Aman Tohan
14,822 Points

Challenge task 4 of 4 not completing despite achieving desired result!

Hello,

I am trying to accomplish Challenge task 4 of 4 in this stage and despite getting the desired result on the screen, I'm unable to get past this task. Am I doing something wrong? Here's my SCSS code below:

/* Write your SCSS code below. */

a { .footer & { color: purple; } }

p { a { color: red; }

a { color: blue;

&:hover {
    opacity: 0.5;
}

} }

The issue is with the following portion of the code based on the above code: a { .footer & { color: purple; } }

4 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Your 2nd anchor declaration (the one you color blue) should be a direct child of p so it should be ">a" instead of just "a"

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

and also what @Jonathan Tame said.

Jonathan Tame
Jonathan Tame
14,524 Points
Jonathan Tame
Jonathan Tame
14,524 Points

I just completed this a few minutes ago. It looks like you're missing div on your div.footer and Colin caught the missing anchor. Here's what my code looked like, for reference:

/* Write your SCSS code below. */
p {
    a {
        color: red;
    div.footer & {
        color: purple;
    }
    }  
  > a {
    color: blue;
    &:hover {
        opacity: 0.5;
    }
  }
}
Aman Tohan
Aman Tohan
14,822 Points
Aman Tohan
Aman Tohan
14,822 Points

Hi Colin,

Thanks for the prompt reply. The greater than sign is already there though, I'm thinking this post may have sanitized my angle bracket away since it wasn't in quotation marks.

This is the error message I get "Bummer! Please use the ampersand selector following the selector for the .footer div." for task 4 of 4 despite having the ".footer &" selector for the anchor grouping. I am getting the result that's required for this task but when I click the button for checking my work, it's not accepting my code.

Also is there a better way to post my code? I tried the "<code></code>" and that didn't seem to work.

Jonathan Tame
Jonathan Tame
14,524 Points

You have to use 3 backticks to show code, like in my previous comment. Be careful not to confuse those with apostrophes. The backtick is next to the number 1 on your keyboard (or at least it should be).

Jonathan Tame
Jonathan Tame
14,524 Points

I should add that you need 3 backticks in the line above your code and 3 backticks in the line after your code. You can add a language tag "```html" is you want formatting to function.

Aman Tohan
Aman Tohan
14,822 Points
Aman Tohan
Aman Tohan
14,822 Points

Ah I see. Thanks Jonathan. Seems just referencing the class name for the div wasn't going to do it in SASS it's also important to specify the type of tag before the class name i.e. "div.footer," despite getting the desired result output to the CSS file of it showing purple.

The angle bracket was being stripped by this post's string sanitizing functionality.

Thanks all again for your help!