trying to using non-scoped jqueryui widgets within a jquery-ui scoped container

I have a scoped jquery ui theme for my page styling.

I want to use an unscoped ui component WITHIN this layout ( the user will be using the themeswitcher utility to customize the look of their 'custom component'. )

like this

<div class="my-theme">
    conte开发者_运维技巧nt and a bunch of widgets here

    <div class="unscoped-theme">
        i want this div to effectively ignore the 'my-theme' css
    </div>
</div> 

i've also considered just moving the unscoped-theme outside the 'my-theme' div, but that is creating it's own problems trying to get it positioned right on the page

any help greatly appreciated!!

You can't prevent the inheritance cascade, you can only overwrite it, either later in the cascade, or with greater specificity. So...

.my-theme{font-weight: bold}
.my-theme .unscoped-theme{font-weight: normal}