Styling jQuery UI Dialog Heading? - css

Question

I know how to style the content of dialogs independently of one another by appending a class to the div and then referencing both classes in the CSS .ui-dialog.myClass{}. What I want to do is style the headers of the dialogs independently of one another and I just can't seem to make it work.
.ui-widget-header.error-dialog{
background: red;
}
.ui-widget-header.success-dialog{
background: green;
}
so on and so forth... Appending the class attached to the div of the dialog of interest doesn't seem to do the job.
<div id="error-dialog" class="error-dialog" title="ERROR"></div>
<div id="success-dialog" class ="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
For example, I'm trying to change the background color of the gray bar that contains ERROR, it is possible I'm just not using the right UI CSS classes:
This is what the HTML looks like when I inspect the element, I have a feeling I'm just not styling the right classes. The div highlighted in blue is where the header color is controlled. All classes listed are automatically assigned to the dialog, I have not edited any of them. If you do edit them, it will affect all dialogs, not just the specific dialog I want.

Answer 1

So I had my classes mixed around and implemented the dialogClass option when instantiating a dialog instead of specifically put the custom class in the HTML. It is worth noting that dialogClass is a bit of a misnomer as when you set that option, you're actually putting the id of your target dialog, not a class. This appears to work how I want it to.
HTML:
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
JS:
var errorDialog = $("#error-dialog").dialog({
autoOpen: false,
height: "auto",
width: 1000,
modal: true,
dialogClass: 'error-dialog',
buttons: [{
id: "error-ok",
text: "Ok",
click: function () {
errorDialog.dialog("close");
}
}]
});
var successDialog = $('#success-dialog').dialog({
autoOpen: false,
height: 200,
width: 400,
modal: true,
dialogClass: 'success-dialog',
buttons: [{
id: "success-ok",
text: "Ok",
click: function () {
successDialog.dialog("close");
}
}]
});
CSS:
.error-dialog .ui-dialog-titlebar {
border: 1px solid black;
background: red;
}
.success-dialog .ui-dialog-titlebar{
border: 1px solid black;
background: green;
}

Answer 2

Not sure why you would need the .ui-widget-header.
Basically whatever you have as your class you put in front of your css with a . in front in your example it would be:
.error-dialog{
background: red;
}
.success-dialog{
background: green;
}
JS Fiddle: https://jsfiddle.net/9acb42v8/