Question

I have this test page: http://www.problemio.com/problems/problem.php?problem_id=305

You see the black bar with 3 tabs about half way down on the page? I am trying to restyle the color of it.

If you look at the page with FireBug, these elements are involved:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

So I tried to add this css to my own css files to over-write the defaults:

.ui-tabs-nav .ui-helper-reset .ui-widget-header .ui-helper-clearfix .ui-corner-all
{
    background-color: gray;
}

but no changes happened. I am not sure if this is the way to do it or not. How can I restyle the background strip color of the black bar with the tabs? And how can I change the color of the text on it?

Thanks!!

Answer 1

Your rule isn’t going to work because ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all are all the different classes assigned to that element, if you want to change the style of that element you just need to restyle one of those classes.

The one with the background in particular is ui-widget-header so you’d have to do:

.ui-widget-header
{
    background-image: none;
    background-color: gray;
}

By having a css rule for .ui-tabs-nav .ui-helper-reset .ui-widget-header .ui-helper-clearfix .ui-corner-all its going to be trying to find an element with the class .ui-tabs-nav followed by a parent element inside that one with the class .ui-helper-reset followed by a parent inside that element with the class .ui-widget-header and so forth…