Help with code challenge.

Leon;

Task 4 of this challenge reads:

We want to add an exception for <a> tags that are in the <div> with a class of .footer: those links should be purple. Use the post-selector ampersand to achieve this.

Let's break this down into steps, shall we?

1. Add an exception for <a> tags. We already are targeting anchor elements, so we know our code needs to go inside the a { } section of our CSS code.
2. We are further selecting <div> elements with a class of footer, so we need to assign properties to div.footer.
3. The Challenge is asking us to utilize the Sass post-selector to select the anchor elements inside the div.footer, so we need to use div.footer &.
4. Assign those elements a color of purple.

So, our CSS code snippet for this segment would look like:

a {
    div.footer & {
        color: purple;
    }
}

When Sass compiles that code it will turn it into:

div.footer a {
    color: purple;
}

So the entire code for Task 4 would be:

p {
  a {
  color: red;
  }

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

Which, in case you are interested, gets compiled by Sass into:

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

As you progress through the Sass courses you will come across a resource website, if you don't know about it already, called SassMeister which I find to be very useful for working with Sass code and seeing rather immediately how it is interpreted into CSS and where, if any (generally several for me) coding errors have occurred.

Happy coding,

Ken