How to color each active tab a *different* color?
I've been struggling for days trying to get each tab itself (NOT the content panel) a different color when selected (but Tab0 I want to remain stock). Google has been no help, since every solution shows how to have each active tab THE SAME color as the others when selected; I need each tab to be a different color from all the others when selected. jQuery 1.11.2 and jQuery UI 1.11.4 and dotNet 3.5 ASPX in Chrome browser. Please someone help!
HTML:
- <div id="tabs">
- <ul>
- <li><a href="#tabs-0">Tab0</a></li>
- <li><a href="#tabs-1">Tab1</a></li>
- <li><a href="#tabs-2">Tab2</a></li>
- <li><a href="#tabs-3">Tab3</a></li>
- </ul>
- ...
CSS:
- #tabs .ui-tabs-nav li.ui-tabs-selected > a[href="#tabs-1"] { background:none; background-color:#8ad2d3; }
- .ui-tabs .ui-tabs-nav li.ui-tabs-active > a[href="#tabs-2"] { background:none; background-color:#d3ece9; }
Notice I'm using an attribute selector to attempt to color the active tab because each tab needs to be a different color when active. Plus, the CSS for each tab above is different to show that I've tried different methods and nothing works. And yes, my custom CSS file is loaded AFTER the default jQuery UI CSS file. :)
EDIT: Forgot to say that I do have a valid DOCTYPE on the page.