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

Posted by stevencooper
stevencooper
5,755 Points

I'm having trouble adding an exception to Sass code. Similar question already asked, however answer doesn't work.

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

The Sass code up to this point works: 

p {
  a {
    color: red; 
      }
   > a {
    color: blue;

  &:hover {
      opacity: 0.5;
      }
    }
  }

but when I try the answer given to a similar question, I get the following message: "Bummer! Please use the ampersand selector following the selector for the .footer div."

The code in the incorrect answer was given as:

   .footer & {
            color: purple;
           }

so the code below doesn't work.

p { 
    a {
        color: red;
        }
    >a {
        color: blue;

        &:hover {
            opacity: 0.5;
          }

   .footer & {
            color: purple;
           }
        }
    }

As it is written above the footer exception gets a 'wrong answer' response.

I'm totally lost. This wasn't covered in the Sass Advanced Nesting video. I'd appreciate any help.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Can you post the link to the challenge, please.

Posting Tip: When you're posting code, be sure to leave a double space before the three ticks and also if you label the type of code beside the three ticks it will syntax highlight. :)

e.g:

!! Ignore the backward slashes !!

Pretend this is a post and
I want to put some code in below.


\`\`\`sass
.some-sass {}
\`\`\`

I have edited your post, btw, so the code displays better. :)

Kathryn Notson
Kathryn Notson
25,941 Points

I'm lost on this question, too. It doesn't make sense to add the "div.footer &" to the a { } or the >a { } part of the code as the previous 3 questions dealt with the ".entry" & ".content" classes.

2 Answers

tobart
tobart
13,518 Points

Hi Steven, this is the code that passed on my side.

p{
  a{
    color: red;
    div.footer &{
      color:purple;
    }
  }
  > a{
    color:blue;
    &:hover{
      opacity:0.5;
    }
  }
}
Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

I don't know why, but this exercise is oddly specific about actually declaring that the footer is a div element. 

/* Write your SCSS code below. */

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

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