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

williamrossi
williamrossi
6,232 Points
Posted by williamrossi
williamrossi
6,232 Points

4 0f 4 sass question

Sass & challenge question 4 of 4

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.

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

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

Thats what I got, any ideas?

many thanks

4 Answers

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

As you have it right now, you are selecting anchor tags with a class of .footer. What you want to do is actually put the ampersand after .footer separated by a space. Like this:

/* Write your SCSS code below. */

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

  > a {
    color: blue;
    &:hover {
        opacity: 0.5;
    }
  }
}
Marguerite Seip
Marguerite Seip
10,762 Points
Marguerite Seip
Marguerite Seip
10,762 Points

I'm glad william brought this one up...Chris, I included the exact same syntax as you did in your comment, and I still get an error that reads "Please use the ampersand selector following the selector for the .footer div." Any idea why I would still get an error? I am using Chrome and I indented the same as you did....here is my code:

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

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

I thought maybe I missed a bracket or forgot a colon or something, but I've looked over many times now and keep getting same error...now i'm thinking maybe it's a bug or browser compatibility issue...please help! thanks.

Marguerite Seip
Marguerite Seip
10,762 Points
Marguerite Seip
Marguerite Seip
10,762 Points

I did add 3 closing brackets at the end, not just two (just in case you don't see the last bracket in my code)

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

Marguerite Seip It looks like there is some kind of bug in the grader. It allowed me to pass with the code I posted but now I had the same trouble. Try posting your code with div added to your .footer selector. In a real life situation you wouldn't want to overspecify your selectors but in this case, you will have to do so in order to pass. This code should work for you:

p { 
    a { 
        color: red; 
       div.footer & {           /*    add the div on this line */
          color: purple; 
      } 

        }

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

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

No problem! Glad it worked this time!

williamrossi
williamrossi
6,232 Points
williamrossi
williamrossi
6,232 Points

yeah it did thanks! lots of swearing at the screen there!

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

Ha I know how that goes!!