Question

A question about CSS.

I am working on some dated code. This code has its own css rules which are linked to some ‘css manager’… now I want to use jQuery UI with its nice and cute dialogues etc.

Now my question is:
I have a css rule say…

#menu-bar{something}

jQuery UI is using rules like:

.ui-dialog-titlebar{something2}

Can I (without modifying jQueryUI stylesheets) do something akin to :

.ui-dialog-titlebar = #menu-bar?

So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?

Thanks in advance.

PS. Let me add that I can not simply do

.ui-dialog-titlebar {something}

becasue {something} is changing depending on the ‘style manager’ used.

Answer 1

I don’t think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:

<div id="menu-bar" title="dialog">...</div>

or add it programmically:

$('.dialog').dialog(...).attr('id', 'menu-bar');

Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.