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

dylan goddard
dylan goddard
12,752 Points
Posted by 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

Dario Morbidi
Dario Morbidi
33,072 Points

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

Dario Morbidi
Dario Morbidi
33,072 Points

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

Dario Morbidi
Dario Morbidi
33,072 Points
Dario Morbidi
Dario Morbidi
33,072 Points

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

Todd Squitieri
Todd Squitieri
8,001 Points
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
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
Todd Squitieri
Todd Squitieri
8,001 Points

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

-T

Becky Christofferson
Becky Christofferson
15,047 Points
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