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

Vince Brown
Vince Brown
16,249 Points
Posted by Vince Brown
Vince Brown
16,249 Points

stuck Sass advanced nesting &:hover

I am stuck on this one the code looks to me as if it should work and when i load it into my IDE it is spitting out the correct css however i am getting a bummer on treehouse saying i need to set the opacity to 0.5 on the psuedo class

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

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The original code that you posted will pass as is once you add in the missing closing brace that Adam noted.

The & in front of the direct child selector is not needed. While it does pass with it included I think that it is redundant in this case. The & in that context would represent the p tag but you are already nested inside the p tag.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Got it

    p {
    a {
    color: red;
    }
    & > a {
    color: blue;
    &:hover {
        opacity: 0.5;
    }
    }
    }
Vince Brown
Vince Brown
16,249 Points
Vince Brown
Vince Brown
16,249 Points

okay that one worked i get that you were missing the curly bracket at the end, but can you elaborate on why the & > was needed before the first a {} because like i said in sublime text i was writing it how i had in the original post and the css being output was the correct a:hover{}

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Try this

     p {
         a {
            color: red;
         }
         & > a {
            color: blue;
          &:hover {
                opacity: 0.5;
        }
     }
Vince Brown
Vince Brown
16,249 Points
Vince Brown
Vince Brown
16,249 Points

Thank you Adam, I tried that but still bummer is coming out unfortunately