Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics (retired) Getting Started with Sass Advanced Nesting

dylan goddard
dylan goddard
12,752 Points

Nested Sass: div.className? why not just .className?

When using the ampersand post selector, why is it necessary to prefix your .className with the kind of element it is, i.e.: div?

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

6 Answers

Mmmmmm i don't think is necessary.

Is that a course challenge? In that case i think is just what the challenge asks.

dylan goddard
dylan goddard
12,752 Points

maybe it's only necessary to pass the particular code challenge I was working on?

dylan goddard
dylan goddard
12,752 Points

Thanks Dario, I tried this elsewhere and it works fine without the div prefix. I think perhaps the challenge is just poorly worded.

"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."

I was pulling my hair out wondering why it wouldn't pass the challenge until I tried putting the word div before my .className.

Pay attention, it should be: "...add an exception for <a> tags that are in the <div> with a class of '.footer'...".

Looking the code posted at the beginning, should not be correct. Because he works only on child <a> of <p>. Instead the challenge refer to all <a>.

Yes, read carefully what ask the challenge. I think i remember something similar when i did.

Todd Squitieri
Todd Squitieri
8,001 Points
p {
  > a {
    color:blue;
    &:hover {
      opacity:0.5;
    }
    a {
   .footer & {color:purple;}
}
  }
}

Mea culpa, guys. What should I be doing in this challenge? I'm so confused here.

-T

dylan goddard
dylan goddard
12,752 Points

my experience with this challenge was that I had to add "div" before ".footer". It turns out that it's not necessary in the real world, but it is for this challenge.

Todd Squitieri
Todd Squitieri
8,001 Points

Got it. Thanks so much, Dylan! Appreciate it.

-T

Becky Christofferson
Becky Christofferson
15,047 Points

Thank you so much for this post. I was about to throw my computer out of the window. SO FRUSTRATING