CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Sean Flood
Sean Flood
13,370 Points

Trying to nest icn.success selector using & but it grays out the text and says answer is incorrect.

Im not sure why the & symbol looks like its invalid or not suppose to be there and im pretty sure im writing this correctly

style.scss
.banner {
  padding: 1em;
  background-color: lightgrey;
  .button{
    font-size: 1.5em;
  }
  .icn {
    font-size: 1.25em;
  }
  &.icn-success{
    color: green;
  }

}

1 Answer

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

Hi there, the purpose of using the parent reference selector (&) is to nest it and its selector inside of the parent code block, in this case, that would be .icn. you also don't need to write the parent name again, your (&) selector does that for you. So your selector nested in .icn should look like this:

&-success {

}
Sean Flood
Sean Flood
13,370 Points

Awesome thanks!