Lance B Lance B - 6 months ago 9
CSS Question

How do I make these 3 tabs each have individual background colors?

I have three tabs and I am looking for each tab background to have its own color. Right now they are all grey. How do I give tab 1, tab 2, and tab 3 individual colors?

http://jsfiddle.net/Lance_Bitner/4zLkb6v0/

.tabs a:hover,
.tabs a.active {
background: #666;
color: #fff;
}

Answer

Check my answer: http://jsfiddle.net/4zLkb6v0/5/

essentially you could use your for attribute for each label:

.tabs .tab label[for='tab-1'] {
  background-color: red;
}
.tabs .tab label[for='tab-2'] {
  background-color: orange;
}
.tabs .tab label[for='tab-3'] {
  background-color: blue;
}

perhaps a class on each label would be better, I would also clean up some of your nesting, too many DIVs nested inside each other.