JQuery UI Dialogs within a personalized class -

i have div class = "dialog-error" applied it. in jquery assign dialog div this: $('.dialog-error').dialog({});

i'd able target , modify ui classes belong "dialog-error" class, tried:

.dialog-error .ui-dialog-titlebar {     background-color: red;     background-image: none;     color: white;     font-size:small; } .dialog-error .ui-dialog-buttonpane {      font-size: 0.8em;  }  

but none apply. how can target ui classes belong class?

what i'm trying achieve have @ least 2 different categories (like: error dialogues , success dialogues) , switch , forth changing div's class. much.

jquery code:

$('.dialog-error').dialog({                 resizable: false,                 height: 200,                 width: 350,                 modal: true,                 dialogclass: "dialog-error", //use affect css                  title: "missing information!",                 buttons: {                     "back": function() {                         $(this).dialog("close");                     }                 }              }); 

html code:

<div class = "dialog-error" style = "display:none;"></div> 

added 'dialogclass: "dialog-error"' line advised,but ui dialog won't show @ all.

if remember jquery ui first removes div dom, creates new 1 , put original in content area. css class isn't applying because div inside dialog, not wrapping it.

to accomplish requirements, try set dialogclass option when initializing modal.

see: http://api.jqueryui.com/dialog/#option-dialogclass