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

Posted by alan rowberry
alan rowberry
2,738 Points

what's the dang answer???

We want to add an exception for <a> tags that are are in the <div> with a class of .footer: those links should be purple. Use the post-selector ampersand to achieve this.

3 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi Allen,

Here's the dang answer.

Jeff

/* Write your SCSS code below. */
p {
    a {
        color: red;
        div.footer & {
            color: purple;
        }
    }
}

p {
    > a {
        color: blue;
        &:hover {
            opacity: 0.5;
        }
    }
}
Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

In Sass the & is used to reference a parent selector like this:

div {
  font-weight: bold;
  margin-top: 20px
  & .newClassName
    font-weight: normal;
    margin-top: 10px
}

This would compile to:

div{
  font-font-weight: bold;
 margin-top: 20px;
}
div.newClassName {
  font-weight: normal;
  margin-top: 10px;
}

***edited to include a space between font-weight: and normal;, and to delete extra hyphen in margin--top:

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

It would equate to this actually

    div{
      font-font-weight: bold;
      margin-top: 20px;
    }
   div .newClassName { // Notice the space
     font-weight:normal;
     margin--top: 10px;
   }

This matters, it will look for any element with a class of newClassName inside any div. Where yours without the space would select a div with the newClassName.

To achieve your out put SASS would be &.newClassName

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Thanks Adam. First thing in the morning and my code was sloppy.

alan rowberry
alan rowberry
2,738 Points
alan rowberry
alan rowberry
2,738 Points

dang! that's a good answer. Especially now I see that the tags in my pasted question were images and didn't even appear in my question that I posted in a moment of screaming frustration. And yet you guys knew what the heck I was asking. AMAZING! INCONCEIVABLE!! THANKS GUYS!!!