Question

Given a structure like:

<div class="Stargate" id="MGM"> 
   <div class="SG1">
   </div>
   <div id="Atlantis">
   </div> 
</div> 

What will be SG1’s and Atlantis’ parent Stargate or MGM?

Answer 1

There’s no difference, both Stargate and MGM is on the same parent div. But you’ll find MGM to be the “better” or “stronger” of the two ways of identifying that div.

With “better/stronger” I mean that the id will have implications in CSS/javascript, for example, in CSS the id is stronger.

#MGM .SG1 {
    /* very strong selector */
}

.Stargate .SG1 {
    /* not so strong selector */
}

In javascript you have

var parentDiv = document.getElementById('MGM');

where the document.getElementById is widely supported whilst the corresponding document.getElementsByClassName is a relatively new addition to modern browsers.