Tabbed Content > Posts >

 

How to make each tab a different background colour?

Markus
11 months ago
Viewed: 2193
14
Useful
Question. I am also using your tabbed content code as well but I want to use a different color background for each tab?
When I try changing the color on the background portion

.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 15px 40px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: #505050 url(tabbg.gif) 0 0 repeat-x;
    border-radius: 25px 0px 25px 0px;
    outline:none;
}

where indicated..it hits all of the tabs.

Any tips?


11 months ago
john   Edit
9

Hi Markus,
Try the CSS:
.tabs li a:nth-child(2) {background-color:#FF0000;} .tabs li a:nth-child(3) {background-color:#336699;} ....

Above is not supported by IE 8 and earlier.

If you also want to support the IE 8 and earlier, you have to give each tab another class and define the background for each of those classes:

HTML:
<a href="#" rel="view1" class="tab1"> ...</a> <a href="#" rel="view1" class="tab2"> ...</a> <a href="#" rel="view1" class="tab3"> ...</a>
CSS:
.tabs li a.tab1 {background-color:#FF0000;} .tabs li a.tab2 {background-color:#FF0000;} ...

Please try if that helps.



11 months ago
Markus   Edit
1

It works great!

Thanks so much!


New Answer