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.

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.

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.

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.

What would be the best way to handle this?

[EDIT] The datepicker 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:

<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"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

As such, I cannot add a super selector. What would be great would be that the date picker widget supports CSS scope. But it does not. I'm stuck manually editing the jQuery CSS file.

The Date Picker is currently being refactored. Hopefully the new code will address this issue.