How to style jQueryUI dialog header with specific ID?

I want to change style of TitleBar in jQueryUI Dialog header, for example I want green background - and it should be applied to only one dialog specified by ID. That's why I wrote something like this:

#sendInviteRequestDialog .ui-dialog .ui-widget-header{
    background-color: green !important;
}

But unfortunately it didn't work. I tried something like this:

#sendInviteRequestDialog > .ui-dialog > .ui-widget-header{
    background-color: green !important;
}

But it also didn't resolve my problem. What am I doing wrong? Thank you in advance.

Solution

The dialog markup (the overlay shadow, borders, background, title bar, close button, drag handles, etc) is added outside the div on which you call .dialog(). So #sendInviteRequestDialog .ui-dialog .ui-widget-header will not work as expected.

To stylize a specific dialog, use the dialogClass option:

The specified class name(s) will be added to the dialog, for additional theming.

Example code:

$("#sendInviteRequestDialog").dialog({
    modal: true,
    dialogClass: "custom-dialog-1"
});

Generated markup:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all custom-dialog-1 ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-id-1" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 300px; top: 29.5px; left: 125.5px; display: block;">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Title</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
    <div id="sendInviteRequestDialog" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="width: auto; min-height: 82px; height: auto;">Content</div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
</div>

Example CSS:

.custom-dialog-1 .ui-widget-header {
    background: green;
}

Demo on jsFiddle

Note that I have used background shortcut instead of background-color; this resets all background properties including background image. The title bar's default background color in in fact an image.