title: What is the purpose of the 'div' selector and why do so many developers use it in their style sheets?
body: <p>Looking through style sheets from popular &amp; unpopular websites I have found the <code>div</code> selector included in them. The bottom four examples were taken from the style sheets of the popular sites <em>Stack Overflow, Github, Youtube</em> &amp; <em>Twitter</em>:</p>
  
  <pre><code>div.form-item-info{padding:4px 0 4px 4px;width:80%;color:#777;}
  
  
  .searchFooterBox div span.smallLabel{font-size:14px}
  
  
  #readme.rst div.align-right{text-align:left;}
  
  
  .hentry .actions&gt;div.follow-actions{visibility:visible;text-align:left;}
  </code></pre>
  
  <p>I find that I can design fully functioning CSS style sheets with out using the <code>div</code> selector so the question is:</p>
  
  <p><strong>What is the <code>div</code> selector's function?</strong><br>
   &amp;<br>
   <strong>Why do so many developers use it?</strong></p>
  
  <p><em>EDIT:</em></p>
  
  <p>To be clear, when using the <code>div</code> selector, what does it mean when <code>div</code> appears before an <strong>id</strong> or <strong>class</strong>? 
  <em>For example:</em></p>
  
  <pre><code>div.foo { color:black; }
  div#bar { color:gray; }
  </code></pre>
  
  <p>And what does it mean when <code>div</code> appears after an <strong>id</strong> or <strong>class</strong>? 
  <em>For example:</em></p>
  
  <pre><code>.foo div { color:black; }
  #bar div { color:gray; }
  </code></pre>
  
  <p>When the <code>div</code> selector appears after an id or class does it have to have another selector appear after it? 
  <em>For example:</em></p>
  
  <pre><code>#foo div span { color:black; }
  #foo div p { color:black; }
  </code></pre>