title: Styling jQuery UI Dialog Heading?
body: <p>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 <code>.ui-dialog.myClass{}</code>. 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. </p>
  
  <pre><code>.ui-widget-header.error-dialog{
  background: red;
  }
  
  .ui-widget-header.success-dialog{
  background: green;
  }
  </code></pre>
  
  <p>so on and so forth... Appending the class attached to the div of the dialog of interest doesn't seem to do the job.</p>
  
  <pre><code>&lt;div id="error-dialog" class="error-dialog" title="ERROR"&gt;&lt;/div&gt;
  &lt;div id="success-dialog" class ="success-dialog" title="SUCCESS"&gt;
      &lt;p&gt;Habitat classification completed successfully! Your results will be viewable in 10 minutes.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:
  <a href="https://i.stack.imgur.com/PRw5O.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PRw5O.jpg" alt="enter image description here"></a></p>
  
  <p>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.
  <a href="https://i.stack.imgur.com/aVpZc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aVpZc.jpg" alt="enter image description here"></a></p>