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

CSS Sass Basics (retired) Getting Started with Sass Advanced Nesting

Daniel Fosco
Daniel Fosco
4,916 Points
Posted by Daniel Fosco
Daniel Fosco
4,916 Points

Sass Challenge — Footer <a> tag doesn’t pass

Hi there,

I’m stuck on part 4/4 of the first Sass challenge and just can’t see what I’m doing wrong. Can anyone shine a light here?

I tried it in the text editor and it’s valid Sass, so I must be doing something different from what the exercise is asking. Here’s the code:

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

Thanks!

3 Answers

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

The answer is the following: 

    /* Write your SCSS code below. */

p {
    a {
    color: red;
    div.footer & {
        color: purple;
    }
  }

    > a {
    color: blue;
    &:hover {
        opacity: 0.5;
    }
  }
}

The way you have it would be trying to join the two together as that is what the ampersand symbol does when it is before the selector. The challenge wants you to nest the div.footer selector inside the anchor tag. Use the post-selector (& after selector) to say that this element goes before the element it is nested in. This outputs this selector in the css: 

   div.footer p a {
       color: purple;
}
Daniel Fosco
Daniel Fosco
4,916 Points
Daniel Fosco
Daniel Fosco
4,916 Points

Thanks for the reply, spot on!

I tried it a different way, but it didn't go. Shouldn't this syntax be valid, though?

.footer & {
        color: purple;
    }
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

That should work as well and it's how I used to answer this challenge question. Unfortunately it is not an accepted answer. In real world programming, you wouldn't need the extra specificity of the div tag, but here they probably wanted it to be as specific as possible. Perhaps that was even so that you don't forget that the .footer is a div tag. Just put the div in the selector for the answer but know that you don't need it.