Question

I use two instances of jQuery tabs defined by id tabs & tabs2

The class that defines color of the tabs background is called ui-widget-header

Can I somehow change the background color for the second tab tabs2? jsfiddle

HTML

results

textarea

CSS

.ui-widget-header {
    background: url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") repeat-x scroll 50% 50% #F6A828;
    border: 1px solid #E78F08;
    color: #FFFFFF;
    font-weight: bold;
}


    <div id="tabs2-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> 
<div style="overflow:auto;height:600px" id="results"></div></div>
<div id="tabs2-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">    </div>

</div>

I tried

#tabs2 > .ui-widget-header {background-color: blue;}

and

#tabs2.ui-widget-header {background-color: blue;}

but none worked

Answer 1

Update, for jQuery-UI:

It is not enough to set the background color, you must also remove the background image that jQuery-UI uses.

So, this:

#tabs2 {
    background-color: powderBlue;
    background-image: none;
}

Produces this:

But I’m going to guess that you want more like this:

Which requires more elaborate CSS:

#tabs3 {
    background-color: powderBlue;
    background-image: none;
}
#tabs3 .ui-tabs, #tabs3 .ui-tabs-panel, 
#tabs3 .ui-tabs-selected, #tabs3 .ui-tabs-selected a {
    background-color: powderBlue;
    background-image: none;
}

See it at jsFiddle.

---

---

Old answer, for the generic question:

Based on the newly pasted HTML,

#tabs2 ul.ui-widget-header {background-color: blue;}

Should do the trick.

If not, one of these should work:

#tabs2 {background-color: blue!important;}
#tabs2 ul {background-color: blue!important;}
#tabs2 {background-color: blue;}
#tabs2 ul.ui-widget-header {background-color: blue!important;}