title: jQuery UI Dialog individual CSS styling
body: <p>I'm looking to style a modal dialog (using UI Dialog) with unique CSS that is separate from the traditional dialog, so in essence to have two jQuery dialogs that each look different.</p>
  
  <p>I've styled one, for example,</p>
  
  <pre><code>&lt;div id="dialog_style1" class="dialog1 hidden"&gt;One content&lt;/div&gt;
  </code></pre>
  
  <p>and another</p>
  
  <pre><code>&lt;div id="dialog_style2" class="dialog2 hidden"&gt;Another content&lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately I've noticed that using separate CSS to style parts of the dialog box, like</p>
  
  <pre><code>.dialog1 .ui-dialog-titlebar { display:none; }
  .dialog2 .ui-dialog-titlebar { color:#aaa; }
  </code></pre>
  
  <p>doesn't work because <code>.ui-dialog-titlebar</code> does not have the class <code>.dialog1</code>, and I can't do an <code>addClass</code> either without breaking into the plugin. </p>
  
  <p>An alternative would be to have an element like <code>body</code> have a unique class/id (depending on which one I want), but that would preclude having both dialogs in the same page.</p>
  
  <p>How can I do this?</p>