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 Improve Your Workflow with Sass Write Nested Selectors

Amanda Baker
seal-mask
.a{fill-rule:evenodd;}techdegree
Amanda Baker
Front End Web Development Techdegree Student 6,579 Points
Posted by Amanda Baker
.a{fill-rule:evenodd;}techdegree
Amanda Baker
Front End Web Development Techdegree Student 6,579 Points

I've tried every way to use an & nested selector, and it has rejected them all.

.icn { & .icn-success { color: green; } }

.icn { & + .icn-success { color: green; } }

.icn { &--success { color: green; } }

.icn { &.icn-success { color: green; } }

icn { .icn-success & { color: green; } }

No clue what it wants or how to proceed.

style.scss 
.banner {
  padding: 1em;
  background-color: lightgrey;

  .button {
    font-size: 1.5em;
  }
}



.icn {
  & .icn-success {
    color: green;
  }
}

2 Answers

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer

This is a very tricky one! It took me a minute to get it on my end as well! The way it's asking for what it wants is strange, but it's wanting .icn-success so if we omit the .icn from the & nested selector it will append it automatically from above. 

.banner {
  padding: 1em;
  background-color: lightgrey;

  .button {
    font-size: 1.5em;
  }
}

.icn {
  font-size: 1.25em;
  &-success {
    color: green;
  }
}