jQueryUI CSS only for a particular part of HTML body

I want to us开发者_StackOverflow社区e jQuery and jQueryUI for Tabbed panes. But I don't want to use the CSS for it for my whole webpage. How can I use the CSS needed for Tabbed Panes only for a particular region where I want to display the panes?

Thanks

Because of the specific selectors used in the jQuery UI CSS, it will only apply to elements that are created by jQuery UI.

This is, of course, unless you give your elements the same class, but this is normal for CSS.

If you were paranoid, you could add a specific selector to the start of each selector, which will only serve to bloat it and make it non portable (not to mention you can't reply on Google's CDN).

This should only be an issue if you have other JQuery UI capable elements. For instance, if you include JQuery UI to a standard page it's not going to just style everything by default. However, it would become an issue if you had a tabbed pane as well as a datepicker, as they both are configured to use Jquery UI.

Getting around it can vary. Some elements such as DataTables allow you to simply not enable the Jquery UI styles (by setting bJqueryUI=false) However, other elements like the datepicker are not quite so simple, they automatically do the adjustment. You could remove some classes to avoid this behavior, but beware that it may affect other behaviors. Removal of classes is as simple as $(vanilla-selector).removeClass("ui-state-hover");