What am i missing here? (SASS Basics Challenge)

i try to indent my code really well, because it is one of the most important elements of the coding process, but it's hard when the code editor in treehouse does not indent or complete code well, plus, the text input area in this question thing does not allow for tabs and when I copied the code over it messed up all of the formatting, so this does not represent my efforts at all. It is really frustrating >_<

shit, i see it now, i put the brace in the wrong place :-(

fixed the curly braces but it is still wrong...

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

dunno why at this point... and the indenting is still messed up from the copy and paste... dunno how to fix it in this question window...

tried this one as well...

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

div.footer p a uses 1 class and 3 type selectors. .footer p a uses 1 class and only 2 type selectors and so has a lower specificity.

.footer will select any element with a class of "footer" whereas div.footer will only select div's with a class of "footer"

In practice .footer would probably be fine. Generally you probably wouldn't see another element with a class of footer.

Yes, an id would.

Where div.footer would make a difference is if you had another element with a class of footer. You probably would not do this on a real project but say <footer class="footer"> Using just .footer would target both the footer and div element, whereas div.footer would specifically target the div with a class of footer and not affect the footer element with a class of footer.

This is a contrived example though. If you were going to use the new footer element in your site then you would use it consistently and wouldn't use div's anymore. Also, you wouldn't add a class of footer to it as it would be redundant.

Not sure how to answer your question and I think I'm missing what you're not understanding.

It's not so much that we have to use div.footer in the context of this code challenge it's just that the Teacher wanted you to do it this way. The instructions hint that they want you to be that specific. I'm not sure what the motivation behind it is. .footer would work perfectly fine with the html we have.

I can't think of a real world situation where you would need to do this though.

You're welcome Richard.

As I thought about it more, it's probably more common to combine id and class selectors like #wrapper.about not so much combining type and class selectors like this challenge div.footer

I thought of possibly a more real world use of combining type and class selectors.

Suppose you are using the "active" class to indicate which page of your main navigation you are currently on. This class is applied to the a element. You also have a slideshow running on that page that uses the "active" class to indicate which slide is the current slide. This class is applied to the list items in the slideshow.

You can't simply use .active as your selector because then the styles will be applied to both. You could use a.active and li.active to style these elements separately.

Anyways, glad you're moving on and making progress.