CSS div class selection question

Question

I downloaded a framework and they are using this as a css selector:

"#Footer .footerTop"

Why not just use:

".footerTop"

Are they the same, or selection is different?

Answer 1

#Footer .footerTop only applies to the .footerTop within #Footer

<div id="Footer">
  <div class="footerTop">I qualify</div>
</div>
<div id="Copyright">
  <div class="footerTop">I don't qualify</div>
</div>

Using just .footerTop would apply rules to both of the inner DIV elements, losing its specificity.

Answer 2

# is an id selector and . is a class selector.

So they are selecting an element with class footerTop inside an element with id Footer.