How to apply CSS theme to only a specific jQuery-UI element?

Question

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.

Answer 1

$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

The .addClass() jQuery function will add the necessary class to the datepicker for it to be picked up by the themed stylesheet.

I had to attach to the window's load event rather than the document's ready event because the datepicker had not been inserted by then.

Note: There will be a small delay between the time the datepicker is added to the DOM and the new class applied, which means the datepicker may appear unstyled while the page is finishing loading.