title: trying to map a css class to an existing element
body: <p>My html cannot be changed, so I need to map a new css stylesheet to the existing elements on the page.</p>
  
  <p>So I have this for a heading:</p>
  
  <p>Existing:</p>
  
  <pre><code>&lt;div class="title"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>My new css for this page, has new css and markup but the html looks like:</p>
  
  <pre><code>&lt;h2&gt;&lt;span&gt;Hello&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>i need to make the first  snippet look exactly the same as the bottom <code>&lt;h2&gt;</code> snippet.</p>
  
  <p>How can I do this w/o changing the html ?</p>
  
  <p><b>Update</b></p>
  
  <p>My HTML, that I cannot alter, is:</p>
  
  <pre><code>&lt;div class=title&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>I have a new stylesheet that I have to implement, but it has a style , but it only works on:</p>
  
  <pre><code>&lt;h2&gt;&lt;span&gt;title&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  
  <p><strong>So I have to change the behavior of the class title, to mimic the output of what <code>&lt;h2&gt;&lt;span&gt;</code> does.</strong></p>