title: Change Color of Fonts in DIV (CSS)
body: <p>I am trying to change the color and size of H2 font and H2 link fonts based on the div they are in but have not been successful. What am I doing wrong? </p>
  
  <pre><code> &lt;style&gt;
  h2 {
  color:fff;
  font-size: 20px;
  }
  social.h2 {
  color:pink;
  font-size: 14px;
  }
  social.h2.h2color {
  color:purple;
  font-size: 10px;
  }
  tv.h2 {
  color:green;
  font-size: 14px;
  }
  tv.h2.h2color {
  color:orange;
  font-size: 10px;
  }
   &lt;/style&gt;
  
   &lt;h2&gt;List of Companies &lt;/h2&gt;
   &lt;div class="social"&gt;
  
   &lt;h2&gt;     &lt;A href="http://www.facebook.com"&gt;Facebook     &lt;/a&gt;
   &lt;span class="h2color"&gt;Found in 2004     &lt;/span&gt;     &lt;/h2&gt; 
   blah blah blah 
  
   &lt;h2&gt;     &lt;A href="http://www.twitter.com"&gt;Twitter     &lt;/a&gt;
   &lt;span class="h2color"&gt;Found in 2007     &lt;/span&gt;     &lt;/h2&gt;
   blah blah blah 
  
   &lt;/div&gt;
  
  
   &lt;div class="tv"&gt;
  
   &lt;h2&gt;     &lt;A href="http://www.fox.com"&gt;Fox     &lt;/a&gt;
   &lt;span class="h2color"&gt;Found in 2004     &lt;/span&gt;     &lt;/h2&gt; 
   blah blah blah 
  
   &lt;h2&gt;     &lt;A href="http://www.nbc.com"&gt;NBC     &lt;/a&gt;
   &lt;span class="h2color"&gt;Found in 2007     &lt;/span&gt;     &lt;/h2&gt;
   blah blah blah 
   &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to make it look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/7gyva.jpg" alt="enter image description here"></p>