Lance B Lance B - 1 year ago 42
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?

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

Answer Source

Check my answer:

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.