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 Christopher Lien
.a{fill-rule:evenodd;}techdegree
Christopher Lien
Front End Web Development Techdegree Student 4,536 Points

Sass & Post Selector Help

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.

this is what I have. Thanks /* Write your SCSS code below. */

.footer {
    &a {
    color: purple;
        } 
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Christopher,

Can you post the rest of your code so we can see the full nesting? It appears as if you have too many levels of nesting here.

Christopher Lien
.a{fill-rule:evenodd;}techdegree
Christopher Lien
Front End Web Development Techdegree Student 4,536 Points

I clicked out so I would have to type it all out from the beginning.

Doesn't the & select the parent element?

So:

& a would compile to .footer a

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Here's the code that you should have at the end of task 3: I've added comments.

p {
  a {
    color: red;
    /* Here the & selector represents p a */
  }
  > a {
    color: blue;
    &:hover {
      opacity: 0.5;
    }
    /* Here the & selector represents p > a */
  }
}

Hint: (I realize I have to give away part of the answer to show the final css but they want you to be specific in task 4. div.footer not just .footer

The final css selector needs to compile to either div.footer p a or div.footer p > a I've found that both work and the instructions aren't clear enough to me on which one it should be.

So they want you to do something similar to what you did with &:hover except you need to put the & in the right spot.

Let me know if you're still stuck.

Christopher Lien
.a{fill-rule:evenodd;}techdegree
Christopher Lien
Front End Web Development Techdegree Student 4,536 Points

Thank you! I had actually just got the answer right before you left this comment.

Again, thanks for the help.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Christopher Lien
seal-mask
.a{fill-rule:evenodd;}techdegree
Christopher Lien
Front End Web Development Techdegree Student 4,536 Points
Christopher Lien
.a{fill-rule:evenodd;}techdegree
Christopher Lien
Front End Web Development Techdegree Student 4,536 Points

I clicked out so I would have to type it all out from the beginning.

Doesn't the & select the parent element?

So:

& a would compile to .footer a

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

That's correct as long as there's a space between which you didn't have in original code.

Without the space it compiles to .footera which isn't the right class name.

However it depends on whether you had .footer nested in anything else.

It could potentially compile to p a .footer a { depending on where you've placed this in the previous code.

I would encourage you to try again so you don't miss out on what they want you to learn here.