title: How to apply CSS theme to only a specific jQuery-UI element?
body: <p>I have a web site already build with my own CSS theme. I'm using jQuery UI "tabs" widget but no CSS from jQuery-UI. </p>
  
  <p>Now, I'm trying to add the "Date Picker" widget in one of my page. It would be great if I could reuse jQuery-UI default theme which is just fine.</p>
  
  <p>The problem is that the date picker theme is also applied to my tabs CSS. For example the "ui-widget" css properties is applied to both date picker and tabs elements. </p>
  
  <p>I can't seem to find a way to apply the css properties to only the date picker. I can't see a "super selector" that only applies to the date picker DIV.</p>
  
  <p>What would be the best way to handle this?</p>
  
  <hr>
  
  <p>[EDIT]
  The <a href="http://jqueryui.com/demos/datepicker/" rel="noreferrer">datepicker</a> widget is really the problem. I cannot apply CSS style specific to it. Here is the starting code of the DIV that get pops up:</p>
  
  <pre><code>&lt;div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"&gt;&lt;div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"&gt;
  </code></pre>
  
  <p>As such, I cannot add a super selector. What would be great would be that the date picker widget supports <a href="http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/" rel="noreferrer">CSS scope</a>. But it does not. I'm stuck manually editing the jQuery CSS file.</p>
  
  <p>The Date Picker is currently being <a href="http://wiki.jqueryui.com/Datepicker" rel="noreferrer">refactored</a>. Hopefully the new code will address this issue.</p>