title: Overwrite CSS class selectors without !important
body: <p>I'm just writing a javascript UI dialog for a web app. The problem is that users can create there own themes for the web app, which may include element css selectors (<code>h1 {...}, div {...}</code> etc.) which overwrite my css formatting for the UI dialog. The dialog is a div element which is formatted over a class selector (id dose not work because this dialog may appear multiple times). Is there a way to stop the element selector of the user template style affecting the UI dialog, without having to use a huge css reset style and using <code>!important</code> for every style of the UI dialog? How do UI libraries like jQuery UI style there dialog boxes?</p>
  
  <p>For example the user theme includes:</p>
  
  <pre><code>input {color:nuts; height:bananas; width:crazy; background:morenuts; }
  </code></pre>
  
  <p>The UI's css:</p>
  
  <pre><code>.ui_modal_wrap input {color:red; border:1px solid black;}
  </code></pre>
  
  <p>The UI's html:</p>
  
  <pre><code>&lt;div class="ui_modal_wrap&gt;
  &lt;input type="text" name="#" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem is still that I have to use a huge css rest for .ui_modal_wrap because you can't really write css with all attributes a user could apply (in this example the height and width element would still break the styling because the UI's dose not include height and width).</p>