title: Add parent class to css inside style tags
body: <p>I have an issue with a web application I am creating.  On the left hand side of the page I have an editable area, on the right a live preview.  The live preview area is actually a HTML file with specially crafted fields that can be manipulated using the edit area.  The problem is because the users HTML can be anything they wish.  Some of the CSS can bleed out into the rest of my page.  It's not uncommon for a user to do: background:red; in their design and cause my whole page to be red.</p>
  
  <p>So, the solution to this (at least the one I have come up with), is to wrap the users styles into a parent class.  Then have that parent class on the preview area.  This way the users styles cannot bleed out into my design.  I was considering something with like this with LESS and jQuery:</p>
  
  <pre><code>//psuedo code
  less.Compile(".ParentClass { " + $("style").html() + "}");
  </code></pre>
  
  <p>However, I cant find any less libraries I can use like this.  Does anyone know of a way I can append a CSS parent class to all the elements in a  tag?</p>
  
  <p>Examples:</p>
  
  <pre><code>&lt;div id="Preview"&gt;
    &lt;style&gt;
       div { background: red; }
    &lt;/style&gt;
    &lt;div&gt;I'm red&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Would become:</p>
  
  <pre><code>&lt;div id="Preview"&gt;
    &lt;style&gt;
       #Preview div { background: red; }
    &lt;/style&gt;
    &lt;div&gt;I'm red&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit: I know styles should really be in the head. However, the html documents being manipulated are actually going to be sent as emails.  Email client support for CSS styling is shoddy at best, in some cases it's better to be in the body.  Its frustrating but I have to work with my target.</p>