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

Beau Lidden
PLUS
Beau Lidden
Courses Plus Student 2,917 Points
Posted by Beau Lidden
Beau Lidden
Courses Plus Student 2,917 Points

Ampersand Issue

I'm required to target the 'a' tags in the footer, and style them with the colour of purple. After having targeted all of the 'a' tags within the 'p' tags of the .entry and .content classes, I would have thought this would be be the solution:

.entry .content {
    p {
    a {
        color:red;
      .footer & {
        color: purple;
      }
    }
    > a {
        color:blue;
      &:hover {
        opacity: 0.5;
      }
    }
  }
}

But the '.footer & {}' doesn't seem to validate for some reason :(

Any hints?

3 Answers

Matthew Jay
Matthew Jay
14,625 Points

Calling backwards can get tricky. That will compile too:

.footer .entry .content p a {
 color: purple;
}
Beau Lidden
PLUS
Beau Lidden
Courses Plus Student 2,917 Points
Beau Lidden
Beau Lidden
Courses Plus Student 2,917 Points

All good. This seems as though this is a know issue as well: https://teamtreehouse.com/forum/sass-selector

FYI the solution was simply placing a 'div' before the '.footer' class.

Beau Lidden
PLUS
Beau Lidden
Courses Plus Student 2,917 Points
Beau Lidden
Beau Lidden
Courses Plus Student 2,917 Points

Hi Matthew Jay - thanks for getting back to me. I think, when I initially went through the quiz, it wasn't accepting a simple:

p {
a {
stuff here
}
}

Approach, hence the '.entry' and '.content' inclusion. I just refreshed my page and was able to do it again, without having to declare those classes, I still needed to do the whole 'div.footer' thing to get it working though. Any ideas why I needed to call out the 'div'? Why didn't simply putting '.footer' work?