Bastien Bastien - 15 days ago 5
CSS Question

JQuery formatting syntax for header (CSS)

I am trying to format the title bar of a custom jQuery UI dialog box. The dialog box has a specified class (e.g. "orange") as follows:

.ui-dialog.orange {
background: #F9F9F9;
border: 3px solid orange;
}


I want to change the title bar as follows

.ui-dialog-titlebar {
background: purple;
}


But only for the class "orange"

I tried

.ui-dialog-titlebar.orange {
background: purple;
}


and

.ui-dialog.orange {
background: #F9F9F9;
border: 3px solid orange;
#titlebar {
background: purple;
}
}


Without any success. Could anyone provide me with right syntax please? Thanks.

Answer

The answer is selecting nested element(s).

 .ui-dialog.orange .ui-dialog-titlebar {
   background: purple;
 }

Or, if you use preprocessor (SASS/LESS):

.ui-dialog {
   /* ... */
   &.orange {
     .ui-dialog-titlebar {
       background: purple;
     }
   }
 }
Comments