Lance B Lance B - 6 months ago 9
jQuery Question

How do I make a different recurring color for each table within the three tabs?

I have three tabs. Each tab has a table. Each one of these tables within the tabs has a light blue color reoccurring in the table background. I want each table to have a different reoccurring color in the background. So each tab will have a table with a different background reoccurring color.


  • I want tab-1 to have a table with reoccurring color 1

  • tab-2 to have a table with reoccurring color 2

  • tab-3 to have a table with reoccurring color 3



So each tab has a table within it with a reoccurring background color that is different.

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

tr:nth-child(even) {
background-color: rgba(197, 232, 255, .2);
}

Answer

Unless you care to add a class or ID to your tabs or tables, you'd need to reference each table by tab index. Since nth-child pseudo-selectors don't work for class-based selectors, you'll need to select the child divs of your tabs:

.tabs > div:nth-child(2) table tr td {
  color: red;
}

You can then do zebra-stripes as you like:

.tabs > div:nth-child(2) table tr:nth-child(even) td {
  color: blue;
}

Demo