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

Question

Hello

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">
    content 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!!

Answer 1

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}