html - CSS Tab coloring problems -

/* navigation --------------------------------------------------------------------------------*/  #nav-wrap .container {     clear: both;     overflow: hidden;     position: relative; }  #nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody {     vertical-align:bottom; }  td#nav {     float:right;     border-spacing:0; } #navigation {     line-height: 1;     float: right; }  #navigation ul {     list-style: none;     float: left;     width:946px;     height:44px;     margin-bottom:-1px; }  #navigation li {     display: inline;     position: relative;     list-style: none;     float: left;     /* change margin of tabs */     margin:0 0 0 0px; } 

so here coding done edit tabs. problem need every tab different color can't figure out change. i've tried making image , uploading (a rainbow-type image has every color need) instead of overlaying it, repeated image in each individual tab. there way can change independent tab colors?

#navigation li.wsite-nav-0 {margin-left:0;} /* edit of tabs , what-not */ #navigation ul li {     display: block;     color: #333;     text-decoration: none;     padding:4px 0 4px 0;     margin:0;     width:130px;     border: 0;     outline: 0;     list-style-type: none;     box-sizing:border-box;     float: left;     font:11px georgia, serif;     border-top:8px solid #939598 ;     /* background: url(menu.png)  ; */ } /* colors , what-not active/hovered tabs */ #navigation ul li#active a{     border-top:8px solid #343434 ;       color: #000;  } 

this code when hover mouse, show you've hovering on option changing it's color

#navigation ul li a:hover {     border-top:8px solid /*#404041 */;     color: #666;  } 

you're gonna have define each element yourself. luckily, using css3, can use nth-child selector.

for example, try this:

#navigation ul li:nth-child(1) {     background-color: red; } #navigation ul li:nth-child(2) {     background-color: green; } #navigation ul li:nth-child(3) {     background-color: blue; } 

and on. there other ways can (such apply different class each element, or use javascript), sounds of closest matches need.