Pick which jquery ui dialogs you are styling?

Question

I have a page that has a lot of dialogs.

There are a particular few that I want to apply some css to.

I can like this:

.ui-dialog .ui-dialog-title
{
    color:#3A6983;
}
.ui-dialog .ui-dialog-content
{
    background:#eee;
    color:#3A6983;
}

However this styles all the dialogs. I only want to style a particular group. How can I do that?

Answer 1

If the dialog you want to style has a class like class="ui-dialog" just add another class after it that you will use for custom styles like class="ui-dialog ui-dialog-custom".

Than do normaly

.ui-dialog-custom .ui-dialog-title {...}

etc.

Just make sure custom style comes after your default style in your css.